{"componentChunkName":"component---src-templates-post-js","path":"/blog/novus-2","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"📦 改进一个简单朴素的 react 数据管理层 NOVUS","tips":[],"categories":["code"],"datetime":"2020-10-17 22:50:20","noFooter":false,"description":"上次造的轮子在好几个项目中落地，因为造的有点仓促，只顾了几个痛点，很多没有考虑周到的地方在实践的时候暴露出来，这里记录下中间改进的地方。","plainTextDescription":"上次造的轮子在好几个项目中落地，因为造的有点仓促，只顾了几个痛点，很多没有考虑周到的地方在实践的时候暴露出来，这里记录下中间改进的地方。\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='142'%3e%3cpath%20d='M0%2071v71h401V0H0v71m302-50h-12c-9%200-11%200-11%202%200%201%208%202%2010%200h1l12%201%2014%201c2%200%202%200%202-2s-1-2-8-2h-8M7%2067l32%201%2031-1-31-1-32%201m0%2025'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.811088295687885,"src":"/static/fca957b9be8350ac79ddfe25ec32c595/0229f/banner.png","srcSet":"/static/fca957b9be8350ac79ddfe25ec32c595/82675/banner.png 500w,\n/static/fca957b9be8350ac79ddfe25ec32c595/fef60/banner.png 1000w,\n/static/fca957b9be8350ac79ddfe25ec32c595/0229f/banner.png 1369w","srcWebp":"/static/fca957b9be8350ac79ddfe25ec32c595/adc0a/banner.webp","srcSetWebp":"/static/fca957b9be8350ac79ddfe25ec32c595/7fe04/banner.webp 500w,\n/static/fca957b9be8350ac79ddfe25ec32c595/d619e/banner.webp 1000w,\n/static/fca957b9be8350ac79ddfe25ec32c595/adc0a/banner.webp 1369w","sizes":"(max-width: 1369px) 100vw, 1369px"}}},"bannerCredit":null,"slug":"/blog/novus-2","tags":["整理","思考","功能","NOVUS","状态管理"]},"headings":[{"value":"一、考虑不周和隐患","depth":2},{"value":"二、改进","depth":2},{"value":"2.1 setState 的同步执行和触发订阅问题","depth":3},{"value":"2.2 状态变更才会重新渲染","depth":3},{"value":"2.3 重复初始化问题","depth":3},{"value":"2.4 自动收集订阅依赖问题","depth":3},{"value":"2.5 订阅触发 “喘息机制” ，Novus 版本的 Fiber","depth":3},{"value":"2.6 完善的测试","depth":3},{"value":"三、 代码","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"novus-2\",\n \"title\": \"📦 改进一个简单朴素的 react 数据管理层 NOVUS\",\n \"date\": \"2020-10-17 22:50:20\",\n \"author\": \"Ubug\",\n \"description\": \"上次造的轮子在好几个项目中落地，因为造的有点仓促，只顾了几个痛点，很多没有考虑周到的地方在实践的时候暴露出来，这里记录下中间改进的地方。\",\n \"categories\": [\"code\"],\n \"tags\": [\"整理\", \"思考\", \"功能\", \"NOVUS\", \"状态管理\"],\n \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst SourceCodeLink = makeShortcode(\"SourceCodeLink\");\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS: \\u5EFA\\u8BAE\\u914D\\u5408\\u4E0A\\u7BC7\\u6587\\u7AE0\\u98DF\\u7528 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/novus\"\n }, \"\\uD83D\\uDCE6 \\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42 NOVUS\"))), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS\", mdx(\"sup\", null, \"2\"), \": \\u6709\\u610F\\u601D\\u7684\\u70B9\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#2.5%20%E8%AE%A2%E9%98%85%E8%A7%A6%E5%8F%91%20%E2%80%9C%E5%96%98%E6%81%AF%E6%9C%BA%E5%88%B6%E2%80%9D%20%EF%BC%8CNovus%20%E7%89%88%E6%9C%AC%E7%9A%84%20Fiber\"\n }, \"Novus \\u7248\\u672C\\u7684 Fiber\\uFF0C\\u5598\\u606F\\u673A\\u5236\"), \"\\uFF0C\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#2.4%20%E8%87%AA%E5%8A%A8%E6%94%B6%E9%9B%86%E8%AE%A2%E9%98%85%E4%BE%9D%E8%B5%96%E9%97%AE%E9%A2%98\"\n }, \"\\u81EA\\u52A8\\u6536\\u96C6\\u8BA2\\u9605\\u4F9D\\u8D56\\u95EE\\u9898\"), \"\\uFF0C\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#2.6%20%E5%AE%8C%E5%96%84%E7%9A%84%E6%B5%8B%E8%AF%95\"\n }, \"\\u5B8C\\u5584\\u7684\\u6D4B\\u8BD5\"))), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"PS\", mdx(\"sup\", null, \"3\"), \": \\u524D\\u7AEF\\u9879\\u76EE\\u4E2D\\u7684\\u6570\\u636E\\u5C42\\u88AB\\u9020\\u8F6E\\u5B50\\u65E0\\u6570\\uFF0C\\u6709\\u5F88\\u591A\\u4F18\\u79C0\\u7684\\u5E93\\uFF0C\\u5927\\u5382\\u66F4\\u4E0D\\u7528\\u8BF4\\u5185\\u90E8\\u6210\\u719F\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\u3002\\u8FD9\\u53EA\\u662F\\u6211\\u5728\\u9879\\u76EE\\u4E2D\\u5B9E\\u8DF5\\u7684\\u4E00\\u4E2A\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u4EC5\\u4F9B\\u53C2\\u8003\\u3002\"))), mdx(\"h2\", null, \"\\u4E00\\u3001\\u8003\\u8651\\u4E0D\\u5468\\u548C\\u9690\\u60A3\"), mdx(\"p\", null, \"\\u5F53\\u65F6\\u7684\\u51FA\\u53D1\\u70B9\\u4E3B\\u8981\\u662F\\u60F3\\u642D\\u4E0A TS \\u7684\\u8BED\\u6CD5\\u63D0\\u793A\\uFF0C\\u8BA9\\u53EF\\u63A8\\u65AD\\u7684\\u6D41\\u7545\\u6027\\u5E2E\\u52A9\\u6211\\u4EEC\\u66F4\\u597D\\u7684\\u7F16\\u7801\\uFF0C\\u7136\\u540E\\u5B8C\\u6210\\u548C\\u4E3B\\u8981\\u4E1A\\u52A1\\u7684\\u914D\\u5408\\uFF0C\\u4E0D\\u8FC7\\u5F88\\u597D\\u7684\\u5B8C\\u6210\\u4E86\\u9879\\u76EE\\u7684\\u6570\\u636E\\u652F\\u6491\\u3002\"), mdx(\"p\", null, \"\\u56DE\\u8FC7\\u5934\\u770B\\u5176\\u4E2D\\u4E5F\\u9047\\u5230\\u4E86\\u5F88\\u591A\\u95EE\\u9898\\u548C\\u9690\\u60A3\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6BCF\\u6B21 setState \\u90FD\\u9700\\u8981\\u66F4\\u65B0\\u5168\\u90E8\\u8BA2\\u9605\\uFF0C\\u5373\\u4F7F\\u5728\\u4E00\\u4E2A EventLoop \\u4E2D\\u4E5F\\u53EF\\u80FD\\u4F1A\\u89E6\\u53D1\\u591A\\u6B21\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6BCF\\u6B21\\u66F4\\u65B0\\u8BA2\\u9605\\u90FD\\u662F\\u540C\\u6B65\\u6267\\u884C\\uFF0C\\u8BA2\\u9605\\u7EC4\\u4EF6\\u8FC7\\u591A\\u7684\\u60C5\\u51B5\\uFF0C\\u66F4\\u65B0\\u64CD\\u4F5C\\u76F4\\u63A5\\u6D89\\u53CA\\u5230 render \\u548C\\u76F8\\u5173\\u8BA1\\u7B97\\uFF0C\\u5373\\u4F7F\\u8003\\u8651\\u5230 react \\u5185\\u7F6E\\u7684 fiber\\uFF0C\\u8FD9\\u4E2A\\u4E5F\\u53EF\\u80FD\\u4F1A\\u963B\\u585E CPU\\uFF0C\\u65E0\\u6CD5\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C\\uFF0C\\u9020\\u6210\\u5361\\u987F\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6BCF\\u6B21\\u8BA2\\u9605\\u64CD\\u4F5C\\u90FD\\u9700\\u8981\\u624B\\u52A8\\u8BA2\\u9605\\uFF0C\\u8FD8\\u9700\\u8981\\u4FDD\\u8BC1\\u548C\\u51FD\\u6570\\u5185\\u4E00\\u81F4\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6BCF\\u6B21\\u8BA2\\u9605\\u7684\\u4EFB\\u4E00\\u72B6\\u6001\\u66F4\\u65B0\\u90FD\\u4F1A\\u89E6\\u53D1\\u6574\\u4E2A model \\u7684\\u5168\\u90E8\\u8BA2\\u9605\\uFF0C\\u7C92\\u5EA6\\u4E0D\\u7CBE\\u7EC6\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u57FA\\u7840\\u5C42\\u7684\\u652F\\u6301\\uFF0C\\u7F3A\\u5C11\\u5B8C\\u5584\\u7684\\u6D4B\\u8BD5\")), mdx(\"p\", null, \"\\u5176\\u4E2D\\u4E00\\u90E8\\u5206\\u662F\\u8003\\u8651\\u4E0D\\u5468\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u4E5F\\u8981\\u5F53\\u65F6\\u7684\\u8003\\u91CF\\u3002\\u8FD9\\u6B21\\u6539\\u8FDB\\u5176\\u4E2D\\u5F88\\u5F71\\u54CD\\u4F7F\\u7528\\u7684\\u70B9\\uFF0C\\u76EE\\u6807\\u662F\\u7528\\u8D77\\u6765\\u4E0D\\u90A3\\u4E48\\u78D5\\u789C\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u6539\\u8FDB\"), mdx(\"h3\", null, \"2.1 setState \\u7684\\u540C\\u6B65\\u6267\\u884C\\u548C\\u89E6\\u53D1\\u8BA2\\u9605\\u95EE\\u9898\"), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u7684 setState \\u548C react \\u5185\\u90E8\\u7684\\u4E0D\\u4E00\\u6837\\uFF0C\\u540E\\u9762\\u8BA8\\u8BBA\\u4E0D\\u8981\\u5947\\u602A\\u4E3A\\u4EC0\\u4E48\\u3002\"), mdx(\"p\", null, \"\\u51FA\\u53D1\\u70B9\\u548C\\u60F3\\u4FDD\\u7559\\u7684\\u7279\\u6027\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"setState \\u662F\\u663E\\u5F0F\\u7684\\u66F4\\u65B0\\u72B6\\u6001\\uFF0C\\u65E0\\u610F\\u53BB\\u76F4\\u63A5\\u5728\\u72B6\\u6001\\u4E0A\\u505A\\u4EE3\\u7406\\u6216\\u8005\\u81EA\\u52A8\\u68C0\\u6D4B\\uFF0C\\u60F3\\u7684\\u662F\\u66F4\\u660E\\u663E\\u7684\\u4E3B\\u52A8\\u66F4\\u65B0\\u72B6\\u6001\\u548C\\u6E32\\u67D3\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u53CA\\u65F6\\u66F4\\u65B0\\uFF0C\\u4E0D\\u50CF react \\u5185\\u90E8\\u5B9E\\u73B0\\uFF0C\\u6BCF\\u6B21 setState \\u4E4B\\u540E\\u9700\\u8981\\u5728\\u56DE\\u8C03\\u4E2D\\u624D\\u80FD\\u8BFB\\u53D6\\u66F4\\u65B0\\u540E\\u7684\\u503C\\uFF0C\\u8FD9\\u91CC\\u8FD8\\u662F\\u60F3\\u53EA\\u8981 setState \\u5C31\\u66F4\\u65B0\\u5230\\u6570\\u636E\\u5C42\\u4E0A\\u53BB\\uFF0C\\u540C\\u6B65\\u8BFB\\u53D6\\u4E5F\\u80FD\\u5F97\\u5230\\u66F4\\u65B0\\u4E4B\\u540E\\u7684\\u503C\\u3002\")), mdx(\"p\", null, \"\\u90A3\\u4E48\\u95EE\\u9898\\u7684\\u89E3\\u51B3\\u5C31\\u53EA\\u80FD\\u662F\\u5728 setState \\u4E4B\\u540E\\u4E0D\\u7ACB\\u9A6C\\u89E6\\u53D1\\u4E8B\\u4EF6\\u901A\\u77E5\\u4E86\\uFF1A\"), mdx(\"p\", null, \"\\u65E7\\u7684\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"/**\\n * \\u7EAF\\u51FD\\u6570\\u7684\\u6570\\u636E\\u66F4\\u65B0\\u51FD\\u6570\\uFF0C\\u540C\\u6B65\\u6267\\u884C\\n *\\n * @param state \\u8981\\u66F4\\u65B0\\u7684\\u5C5E\\u6027\\u6216\\u8005\\u51FD\\u6570\\n */\\nprotected setState = (\\n state: Pick | ((states: S) => Pick)\\n) => {\\n if (typeof state === \\\"function\\\") {\\n const newState = state(this.state)\\n this.state = { ...this.state, ...newState }\\n } else {\\n this.state = { ...this.state, ...state }\\n }\\n this.notifyChanges()\\n}\\n/**\\n * \\u901A\\u77E5\\u4E0A\\u5C42\\u89E6\\u53D1\\u8BA2\\u9605\\u7684 connect \\u8F6C\\u6362\\u51FD\\u6570\\uFF0C\\u6BCF\\u6B21\\u4FEE\\u6539 state \\u5FC5\\u987B\\u89E6\\u53D1\\uFF01\\uFF01\\uFF01\\n */\\nprotected notifyChanges = () => {\\n // \\u9700\\u8981\\u901A\\u77E5\\u8BA2\\u9605\\u5668\\u5C31\\u540C\\u6B65\\u53BB\\u901A\\u77E5\\uFF0C\\u7ACB\\u5373\\u9A6C\\u4E0A\\uFF0C\\u540C\\u4E00\\u4E2A\\u961F\\u5217\\u4E2D\\u7684\\u591A\\u6B21\\u8C03\\u7528\\u4F1A\\u6709\\u5361\\u987F\\u95EE\\u9898\\n novus.notifyChangesListeners(this.namespace)\\n}\\n\")), mdx(\"p\", null, \"\\u65E7\\u7248\\u672C\\u6BCF\\u6B21\\u8C03\\u7528 setState \\u90FD\\u4F1A\\u76F4\\u63A5\\u53BB\\u540C\\u6B65\\u901A\\u77E5\\u5168\\u90E8\\u7684\\u8BA2\\u9605\\uFF0C\\u6BCF\\u6B21\\u8C03\\u7528\\u90FD\\u4F1A\\u5FE0\\u5B9E\\u7684\\u6267\\u884C\\u8BA2\\u9605\\u51FD\\u6570\\uFF0C\\u6240\\u4EE5\\u4E0D\\u540C\\u51FD\\u6570\\u4E2D\\u8FDE\\u7EED\\u8C03\\u7528\\u4F1A\\u51FA\\u73B0\\u95EE\\u9898:\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"493px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/4a8533abb788eca7fcd77a99808d66c7/cd58e/novus-issue.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"66.79536679536679%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACWklEQVQ4y5WTS2/aQBSF/Wf7Byq1qy7aqpsuUgkllZBKg5IGg40fY3vMwxgwhEfjYCBQSCmkcQIJP+P0ekiltosoXXwaz2DOnHvvsaQUCuj6Ojo+Q9hyEAYM434F8yjAbNDELHoa84dVSh22oZdXML0Ylr+GVd/AbtyBN7dw/oE/8Ni5dHDoQ3Mi5I0zGO4FKsEVvHaMausncf3fSAfZBgkOYVXncOtLErxGvXsHv7MR1E7XxO2TkVKZGnQ+hmoPUSQ0foFSYyXEE6qt+A/Rx8TXVBkJfkhzmFSqwgawKjOw0hR2spZnMOiZ+z9I9Iacx6i0Hgjiv/etWLzD61eQ3qYsqHyCYy1EsTSDE9yCd7cotalkUfpakDj4vQpH9OzR6rVvBMlZqUk9fLlnI8um2M+f4aMa4XOui1zGw6E2hOpOYFA7dD4iR7sh1cSf12Jf727Q7N+j0btH0N+iSr9J7/YdMBpIXm5BtYbQtT6cnA+VDaHYIyh0JrMJdEoC1wpwLQ6jPKd3B2KQSUt4bUHrAm6DSn6zp8MqT2FlOFy1C+YvBUblEjl9AJ11YBsMmn2OvDkgQtEexYpwovVQYLRXInw6Dmmw3yC9el+A45FDcmLTTYn9JuGQqGxGMJ2vqLg1VJtLlClSCUfFUCTjRBtDNiaUjLFICKteQnr+OktTnVKw6Qa6dZdHKqO+gqyHomTFnoopJj1LsnmknonsyvqIhL+L3DZ6dygnQ3n2Ig3bW+DEiIQj2UwExuT4QjgpWKNdAviUPtE5iu4M6S+n4jyhSAnRS3PqK7XIHOEXAQtLDgqoii8AAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"性能问题\",\n \"title\": \"性能问题\",\n \"src\": \"/static/4a8533abb788eca7fcd77a99808d66c7/cd58e/novus-issue.png\",\n \"srcSet\": [\"/static/4a8533abb788eca7fcd77a99808d66c7/2c191/novus-issue.png 259w\", \"/static/4a8533abb788eca7fcd77a99808d66c7/cd58e/novus-issue.png 493w\"],\n \"sizes\": \"(max-width: 493px) 100vw, 493px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u6027\\u80FD\\u95EE\\u9898\"), \"\\n \")), mdx(\"p\", null, \"\\u89E3\\u51B3\\u65B9\\u6848\\u5F88\\u7B80\\u5355\\uFF0C\\u8BA9 setState \\u7F13\\u4E00\\u7F13\\uFF0C\\u8003\\u8651\\u5230 Event Loop \\u7684\\u673A\\u5236\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"/**\\n * \\u901A\\u8FC7\\u6807\\u5FD7\\u53D8\\u91CF\\u63A7\\u5236\\u591A\\u6B21\\u7684\\u4E8B\\u4EF6\\u901A\\u77E5\\u5728\\u4E00\\u4E2A EventLoop \\u4E2D\\u53EA\\u89E6\\u53D1\\u4E00\\u6B21\\n */\\nprotected waitingNotify = false\\n/**\\n * \\u901A\\u77E5\\u4E0A\\u5C42\\u89E6\\u53D1\\u8BA2\\u9605\\u7684 connect \\u8F6C\\u6362\\u51FD\\u6570\\uFF0C\\u6BCF\\u6B21\\u4FEE\\u6539 state \\u5FC5\\u987B\\u89E6\\u53D1\\uFF01\\uFF01\\uFF01\\n */\\nprotected notifyChanges = () => {\\n /** v1 \\u9700\\u8981\\u901A\\u77E5\\u8BA2\\u9605\\u5668\\u5C31\\u540C\\u6B65\\u53BB\\u901A\\u77E5\\uFF0C\\u7ACB\\u5373\\u9A6C\\u4E0A\\uFF0C\\u540C\\u4E00\\u4E2A\\u961F\\u5217\\u4E2D\\u7684\\u591A\\u6B21\\u8C03\\u7528\\u4F1A\\u6709\\u5361\\u987F\\u95EE\\u9898\\n novus.notifyChangesListeners(this.namespace)\\n **/\\n\\n // v2 \\u9700\\u8981\\u901A\\u77E5\\u8BA2\\u9605\\u5668\\uFF0C\\u7A0D\\u7B49\\u4E00\\u4E0B\\uFF0C\\u4E0B\\u4E2A\\u4EFB\\u52A1\\u961F\\u5217\\u7ED3\\u675F\\u5C31\\u901A\\u77E5\\uFF0C\\u5148\\u628A\\u8FD9\\u4E2A\\u4EFB\\u52A1\\u961F\\u5217\\u7684\\u5168\\u90E8 setState \\u6267\\u884C\\u5B8C\\u6BD5\\n // setState \\u662F\\u540C\\u6B65\\u7684\\uFF0C\\u4F46\\u662F\\u4E8B\\u4EF6\\u901A\\u77E5\\u4E0D\\u662F\\u540C\\u6B65\\n if (this.waitingNotify) return\\n this.waitingNotify = true\\n new Promise((r) => r()).then(() => {\\n novus.notifyChangesListeners(this.namespace)\\n this.waitingNotify = false\\n })\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6837 notifyChanges \\u5728\\u540C\\u4E00\\u4E2A EventLoop \\u4E2D\\u5C31\\u53EA\\u4F1A\\u8C03\\u7528\\u4E00\\u6B21\\u4E86\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS: \\u5176\\u4E2D\\u6D89\\u53CA\\u5230 EventLoop \\u7684\\u70B9\\u5728 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Promise.then\"), \" \\u4E2D\\uFF0C\\u6211\\u4EEC\\u7684\\u76EE\\u7684\\u662F\\u5C06\\u5168\\u90E8 setState \\u89E6\\u53D1\\u7684 notifyChanges hold \\u4F4F\\uFF0C\\u76F4\\u5230\\u672C\\u8F6E\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u7ED3\\u675F\\u3002\\u4ECE Event Loop \\u7684\\u5B8F\\u4EFB\\u52A1\\u3001\\u5FAE\\u4EFB\\u52A1\\u7684\\u903B\\u8F91\\u4E0A\\u8003\\u8651\\uFF0CPromise.then \\u8868\\u793A\\u628A\\u5F53\\u524D\\u56DE\\u8C03\\u653E\\u5230\\u5FAE\\u4EFB\\u52A1\\u4E2D\\uFF0C\\u6240\\u4EE5\\u5F53\\u524D\\u5B8F\\u4EFB\\u52A1\\u7ED3\\u675F\\u5C31\\u4F1A\\u53BB\\u5FAE\\u4EFB\\u52A1\\u4E2D\\u68C0\\u67E5\\uFF0C\\u4E5F\\u5C31\\u80FD\\u591F\\u5728\\u5176\\u4ED6\\u5B8F\\u4EFB\\u52A1\\u4E4B\\u524D\\u89E6\\u53D1\\u6211\\u4EEC\\u7684\\u76EE\\u6807 notifyChanges\\u3002\")), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"416px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/ca0989f0fb1dc48432f2ba50548ee084/ba20c/novus-issue-after.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"61.38996138996139%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7DAAAOwwHHb6hkAAACV0lEQVQoz22SSW4TURCGe8+KA7BlwQE4BRIHYMUNWLFBKLHEJmJypCgsAIkQJZ6623aPdrfbTnuK7dixYzLYjhMIdiwFxBl+qsqJEoZFdem9Ln3/X1VP8SvfwRFUpyhUJzdiehnzc1CbwqtMEM924WY0mIYH02mhXO4hLDXhlc+Eo/Cn8A/s/+ETMGnuIWUdUOxT9ElkhmD7B4r1c+Eo+fCb0DnyN+KPu3CubhdPsboWIpnZQTLbRpxy2vkCqzCE6Q+lVnGKJ1LsSeuTv+L6rlifwSyM8fylCtXsEnAXiWwHm3oT8TQLdERY0ew9uMUxGGx6A1IbwcgfSXboPps/lLNBOWF0sfBag2b1kDR2kTIY2kYi0xZgxt0noDuAah9Cs/uIpVuI6dfBLWVzBCQhwzsiYI+AOlQCbmoNcch1urQ9IvEjKLl8AzmvCc05IKUdKWDFOMG5FXYX1M7nLQcnWHyTFof8T3f6klWzJ8K8D+XdcgS+tQbDaZPDjljnInbLDrm1qzlnvCEWXmlI0QzZHf9jZ+7WV9jBmPIplOjyCt5HnyGWKlHhngAFSjCeEc+YW/QrZ7IUBmpWV+5kOUbnckkdgh5DWYzauHP/EZZWsrALA/nBrajmrizl6p2WqGVLWtZh+QNZAD8XnQRZdA4cQYm8TeP2vYd4+mIDbjCUVriYoRz8zng2RZqj4R+D601aUMY9kGXwPBnIY2DXytKqi1t3H+DxkyiSehUf13182ggQNmaod36h2v6JSusCNcr8HiPkcD2+hZi2Le4+fM7TOYRNrsPmBX4DRUz94klk65kAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"性能问题 after\",\n \"title\": \"性能问题 after\",\n \"src\": \"/static/ca0989f0fb1dc48432f2ba50548ee084/ba20c/novus-issue-after.png\",\n \"srcSet\": [\"/static/ca0989f0fb1dc48432f2ba50548ee084/2c191/novus-issue-after.png 259w\", \"/static/ca0989f0fb1dc48432f2ba50548ee084/ba20c/novus-issue-after.png 416w\"],\n \"sizes\": \"(max-width: 416px) 100vw, 416px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u6027\\u80FD\\u95EE\\u9898 after\"), \"\\n \")), mdx(\"p\", null, \"\\u8FD9\\u6837\\uFF0C\\u5C31\\u7B97\\u51FD\\u6570\\u94FE\\u4E2D\\u8C03\\u7528\\u4E86\\u518D\\u591A\\u6B21\\u72B6\\u6001\\u66F4\\u65B0\\uFF0C\\u89E6\\u53D1\\u7684\\u4E8B\\u4EF6\\u901A\\u77E5\\u4E5F\\u53EA\\u4F1A\\u5728\\u8FD9\\u4E00\\u4E2A\\u4E8B\\u4EF6\\u5FAA\\u73AF\\u7ED3\\u675F\\u540E\\u624D\\u4F1A\\u89E6\\u53D1\\uFF0C\\u907F\\u514D\\u89E6\\u53D1\\u592A\\u591A\\u65E0\\u7528\\u7684\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\u3002\"), mdx(\"h3\", null, \"2.2 \\u72B6\\u6001\\u53D8\\u66F4\\u624D\\u4F1A\\u91CD\\u65B0\\u6E32\\u67D3\"), mdx(\"p\", null, \"\\u7C92\\u5EA6\\u66F4\\u7EC6\\uFF0C\\u76EE\\u7684\\u662F\\u8BA9\\u53D8\\u66F4\\u7684\\u5F71\\u54CD\\u4EC5\\u9650\\u4E8E\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\\u548C\\u8BA1\\u7B97\\u3002\"), mdx(\"p\", null, \"\\u8BA2\\u9605\\u673A\\u5236\\u662F\\u57FA\\u4E8E\\u6574\\u4E2A\\u6570\\u636E\\u6A21\\u578B\\u7684\\uFF0C\\u72B6\\u6001\\u53D8\\u66F4 -> \\u901A\\u77E5\\u8BA2\\u9605 -> \\u8BA2\\u9605\\u91CD\\u65B0\\u8BA1\\u7B97\\u5168\\u90E8\\u7684\\u7EC4\\u4EF6\\u72B6\\u6001 -> \\u7EC4\\u4EF6\\u72B6\\u6001\\u89E6\\u53D1\\u6E32\\u67D3\\u3002\"), mdx(\"p\", null, \"\\u65E7\\u7248\\u672C\\u7684\\u673A\\u5236\\u662F\\u76F4\\u63A5\\u8BA1\\u7B97\\u51FA\\u7ED3\\u679C\\u5C31\\u66F4\\u65B0\\u5230\\u72B6\\u6001\\uFF0C\\u56E0\\u4E3A\\u8BA1\\u7B97\\u7ED3\\u679C\\u662F\\u65B0\\u7684\\u503C\\uFF0C\\u65E0\\u8BBA\\u662F\\u5426\\u6574\\u4E2A\\u72B6\\u6001\\u662F\\u4E0D\\u662F\\u786E\\u5B9E\\u6709\\u53D8\\u52A8\\uFF0C\\u90FD\\u4F1A\\u5BFC\\u81F4\\u91CD\\u65B0\\u6E32\\u67D3\\u7684\\u89E6\\u53D1\\u3002\"), mdx(\"p\", null, \"\\u4E0B\\u9762\\u7B80\\u5355\\u6D45\\u6BD4\\u8F83\\u4E00\\u4E0B\\uFF0C\\u80FD\\u591F\\u7A0D\\u5FAE\\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"setState(oldState => {\\n let newState = mapStatetoHooks(novus.models, novus)\\n\\n /**\\n * \\u8FD9\\u4E2A\\u5730\\u65B9\\n * 1. \\u89C6\\u56FE\\u4E0E\\u72B6\\u6001\\u662F\\u4E00\\u4E00\\u5BF9\\u5E94\\uFF0C\\u5982\\u679C state \\u6CA1\\u6709\\u53D8\\uFF0C\\u90A3\\u4E48\\u4E0D\\u5E94\\u8BE5\\u901A\\u77E5\\u6E32\\u67D3\\u7EC4\\u4EF6\\n * 2. \\u5982\\u679C\\u6309\\u7167\\u4E8B\\u4EF6\\u6765\\u8BF4\\uFF0C\\u8FD9\\u91CC\\u786E\\u5B9E\\u6709 setState \\u7684\\u8C03\\u7528\\uFF0C\\u5E94\\u8BE5\\u901A\\u77E5\\u6E32\\u67D3\\u7EC4\\u4EF6\\uFF0C\\u7EC4\\u4EF6\\u662F\\u5426\\u5F71\\u54CD\\u5B50\\u7EC4\\u4EF6\\u53EF\\u4EE5\\u7528 Pure \\u5B50\\u7EC4\\u4EF6\\u91CC\\u63A7\\u5236\\n */\\n // \\u2193 \\u6D45\\u6BD4\\u8F83\\u4E00\\u4E0B\\u5224\\u65AD\\u662F\\u5426\\u9700\\u8981\\u66F4\\u65B0 state\\uFF0C\\u89E6\\u53D1\\u8BA2\\u9605\\n for (const key in oldState) {\\n if (oldState[key] !== newState[key]) {\\n return newState\\n }\\n }\\n return oldState\\n\\n // \\u2193 \\u4E0D\\u6BD4\\u8F83\\uFF0C\\u53EA\\u8981\\u6709 setState \\u52A8\\u4F5C\\uFF0C\\u5C31\\u66F4\\u65B0 state\\n // return newState;\\n})\\n\")), mdx(\"p\", null, \"\\u5982\\u679C\\u4E25\\u683C\\u6267\\u884C\\u72B6\\u6001\\u7684\\u7C92\\u5B50\\u6027\\uFF0C\\u4E5F\\u5C31\\u662F\\u6BCF\\u4E2A model \\u7684\\u72B6\\u6001\\u90FD\\u662F\\u57FA\\u7840\\u6570\\u636E\\u7C7B\\u578B\\u6216\\u8005\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\uFF0C\\u90A3\\u4E48\\u8FD9\\u4E2A\\u6D45\\u6BD4\\u8F83\\u4F1A\\u907F\\u514D\\u975E\\u9884\\u671F\\u89E6\\u53D1\\uFF08\\u5BF9\\u8C61\\u5F15\\u7528\\u975E\\u539F\\u5730\\u672A\\u4FEE\\u6539\\uFF09\\u6216\\u8005\\u6F0F\\u89E6\\u53D1\\u95EE\\u9898\\uFF08\\u5BF9\\u8C61\\u5F15\\u7528\\u539F\\u5730\\u4FEE\\u6539\\uFF09\\u3002\"), mdx(\"h3\", null, \"2.3 \\u91CD\\u590D\\u521D\\u59CB\\u5316\\u95EE\\u9898\"), mdx(\"p\", null, \"\\u65E7\\u7248\\u672C\\u5728\\u903B\\u8F91\\u4E2D\\u8D1F\\u8D23\\u5E94\\u7528 hooks \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"useState\"), \" \\u72B6\\u6001\\u521D\\u59CB\\u5316\\u7528\\u5230\\u7684\\u662F\\u7528\\u6237\\u81EA\\u5B9A\\u4E49\\u7684\\u51FD\\u6570\\uFF0C\\u4E00\\u5F00\\u59CB\\u8BA1\\u7B97\\u51FA\\u521D\\u59CB\\u503C\\u5C31\\u5B8C\\u6210\\u4E86\\u4ED6\\u7684\\u4EFB\\u52A1\\uFF0C\\u4F46\\u662F\\u5728\\u540E\\u7EED\\u7684\\u6E32\\u67D3\\u4E2D\\uFF0C\\u56E0\\u4E3A\\u51FD\\u6570\\u7EC4\\u4EF6\\u7684\\u7F18\\u6545\\uFF0C\\u5373\\u4F7F\\u4E0D\\u9700\\u8981\\u4E86\\uFF0C\\u8FD9\\u4E2A\\u8BA1\\u7B97\\u4E5F\\u6CA1\\u6709\\u514D\\u9664\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"let [state, setState] = useState(mapStatetoHooks(novus.models, novus))\\n\")), mdx(\"p\", null, \"\\u81F3\\u4E8E\\u89E3\\u51B3\\u65B9\\u6CD5\\uFF0C\\u53EA\\u9700\\u8981\\u4E00\\u4E2A\\u4FDD\\u6301\\u4E0D\\u53D8\\u7684\\u5F15\\u7528\\uFF0C\\u4E5F\\u5C31\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ref\"), \" \\u5373\\u53EF\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"const initState = useRef(null);\\n\\nif(initState.current === null) {\\n initState.current = mapStatetoHooks(novus.models, novus);\\n}\\nlet [state, setState] = useState(initState.current);\\n\")), mdx(\"p\", null, \"\\u80FD\\u591F\\u51CF\\u5C11\\u4E00\\u70B9\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\\uFF0C\\u4E5F\\u7B97\\u662F\\u6027\\u80FD\\u4F18\\u5316\\u7684\\u8D21\\u732E\\u4E86\\u3002\"), mdx(\"h3\", null, \"2.4 \\u81EA\\u52A8\\u6536\\u96C6\\u8BA2\\u9605\\u4F9D\\u8D56\\u95EE\\u9898\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u662F\\u975E\\u5E38\\u5927\\u7684\\u75DB\\u70B9\\uFF0C\\u56E0\\u4E3A\\u65E7\\u7248\\u672C\\u6BCF\\u6B21 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"useNovus\"), \" \\u7684\\u65F6\\u5019\\uFF0C\\u90FD\\u9700\\u8981 deps \\u4F9D\\u8D56\\u5217\\u8868\\uFF0C\\u4F46\\u662F\\u624B\\u52A8\\u5199\\u7684\\u8FD9\\u4E2A\\u503C\\u5E94\\u8BE5\\u548C\\u51FD\\u6570\\u4E2D\\u8C03\\u7528\\u5230\\u7684\\u76F8\\u5BF9\\u5E94\\uFF0C\\u8FD9\\u4E0D\\u5E94\\u8BE5\\u662F\\u5F00\\u53D1\\u8005\\u9700\\u8981\\u5C0F\\u5FC3\\u7FFC\\u7FFC\\u81EA\\u5DF1\\u817E\\u632A\\u62F7\\u8D1D\\u547D\\u540D\\u7A7A\\u95F4\\u7684\\u5730\\u65B9\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const [isTitleChanged, isContentChanged, diffStyle] = useNovus(\\n models => {\\n return [\\n models.noteModel.state.isTitleChanged,\\n models.noteModel.state.isContentChanged,\\n models.noteModel.state.diffStyle,\\n ]\\n },\\n [\\\"noteModel\\\"] // <------------!!\\n)\\n\")), mdx(\"p\", null, \"\\u90A3\\u4E48\\u600E\\u4E48\\u77E5\\u9053\\u51FD\\u6570\\u4E2D\\u4F7F\\u7528\\u5230\\u90A3\\u4E9B model \\u4E86\\u5462\\uFF1F\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u63D0\\u4F9B\\u4E00\\u4E2A\\u83B7\\u53D6 model \\u7684\\u65B9\\u6CD5\\uFF0C\\u4F7F\\u7528\\u8FD9\\u4E2A\\u65B9\\u6CD5\\u5728\\u521D\\u59CB\\u5316\\u72B6\\u6001\\u7684\\u65F6\\u5019\\u6536\\u96C6\\u4F9D\\u8D56\\nconst mapStatetoProps = getModel => {\\n return [\\n getModel('noteModel').state.isTitleChanged,\\n getModel('noteModel').state.isContentChanged,\\n ]\\n}\\n\\nconst deps = new Set([])\\n\\nconst getModel = (namespace) => {\\n deps.add(namespace) // \\u51FD\\u6570\\u91CC\\u9762\\u6536\\u96C6\\n return novus.getModel(namespace)\\n}\\n\\ninitState = mapStatetoProps(getModel)\\n\")), mdx(\"p\", null, \"\\u6216\\u8005\\u4F7F\\u7528\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const mapStatetoProps = models => {\\n return [\\n models.noteModel.state.isTitleChanged,\\n models.noteModel.state.isContentChanged,\\n ]\\n}\\n\\nconst deps = new Set([])\\n\\n// \\u4F7F\\u7528 Proxy \\u4EE3\\u7406\\u7684\\u5F62\\u5F0F\\uFF0C\\u62E6\\u622A\\u5BF9 models \\u7684\\u8BBF\\u95EE\\nconst handler = {\\n get: function(obj, prop) {\\n deps.add(prop) // \\u5728\\u4EE3\\u7406\\u91CC\\u9762\\u83B7\\u53D6\\n return prop in obj ? obj[prop] : undefined;\\n }\\n};\\nconst models = new Proxy(novus.models, handler);\\ninitState = mapStatetoProps(models)\\n\")), mdx(\"p\", null, \"\\u4E24\\u79CD\\u65B9\\u6CD5\\u8C03\\u7528\\u5F62\\u5F0F\\u4E0D\\u540C\\uFF0C\\u4F46\\u662F\\u539F\\u7406\\u76F8\\u4F3C\\uFF0C\\u524D\\u9762\\u7684\\u51FD\\u6570\\u8C03\\u7528\\u53EF\\u80FD\\u6709\\u70B9\\u4E0D\\u7075\\u6D3B\\uFF0C\\u6240\\u4EE5\\u4EE3\\u7406 Proxy \\u7684\\u5F62\\u5F0F\\u53EF\\u80FD\\u66F4\\u597D\\u4E9B\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"let initState;\\nconst _deps = useRef(deps);\\n\\nif (typeof deps === \\\"undefined\\\") {\\n // \\u4E00\\u4E2A\\u4F9D\\u8D56\\u5217\\u8868\\n const autoDeps = new Set([]);\\n // \\u4EE3\\u7406\\u7684\\u5904\\u7406\\u51FD\\u6570\\n const handler = {\\n // \\u6BCF\\u6B21\\u83B7\\u53D6\\u5143\\u7D20\\u7684\\u65F6\\u5019\\u4EE3\\u7406\\u5230\\u8FD9\\u91CC\\n get(target: TModelsPool, key: string) {\\n // \\u6536\\u96C6\\u8FD9\\u6B21\\u7684 model \\u547D\\u540D\\u7A7A\\u95F4\\u4F9D\\u8D56\\n if (target[key]) {\\n autoDeps.add(key);\\n }\\n // \\u4E0D\\u7834\\u574F\\u9884\\u671F\\u7684\\u5904\\u7406\\u903B\\u8F91\\n return target[key];\\n },\\n };\\n // \\u5728\\u539F novus.models \\u4E0A\\u6DFB\\u52A0\\u8FD9\\u4E2A\\u4EE3\\u7406\\n const autoModels = new Proxy(novus.models, handler);\\n // \\u7B2C\\u4E00\\u6B21\\u521D\\u59CB\\u5316\\u7684\\u65F6\\u5019\\u8FD0\\u884C\\u8FD9\\u4E2A\\u6536\\u96C6\\u51FD\\u6570\\n initState = mapStatetoHooks(autoModels, novus);\\n // \\u4EE3\\u66FF\\u672A\\u6307\\u5B9A\\u7684\\u4F9D\\u8D56\\u5217\\u8868\\n _deps.current = Array.from(autoDeps);\\n} else {\\n initState = mapStatetoHooks(novus.models, novus);\\n}\\n\\nlet [state, setState] = useState(initState);\\n\")), mdx(\"p\", null, \"\\u4E8B\\u5B9E\\u8BC1\\u660E\\uFF0C\\u8FD9\\u4E2A\\u673A\\u5236\\u8FD8\\u662F\\u975E\\u5E38\\u6709\\u6548\\u679C\\u7684\\uFF0C\\u4E0D\\u5FC5\\u663E\\u5F0F\\u7684\\u624B\\u52A8\\u58F0\\u660E\\uFF0C\\u5168\\u90E8\\u81EA\\u7136\\u7684\\u6536\\u96C6\\u3002\\u540C\\u65F6\\u5E76\\u6CA1\\u6709\\u5F88\\u660E\\u663E\\u7684\\u8FDD\\u80CC\\u7528\\u6237\\u90E8\\u5206\\u4EE3\\u7801\\u7684\\u9884\\u671F\\uFF0C\\u6CA1\\u6709\\u521B\\u5EFA\\u65B0\\u7684\\u8BED\\u6CD5\\u4EC0\\u4E48\\u7684\\uFF0C\\u6211\\u4EEC\\u53EA\\u662F\\u6084\\u6084\\u7684\\u5728\\u540E\\u9762\\u591A\\u505A\\u4E86\\u4E00\\u70B9\\u5DE5\\u4F5C\\u3002\"), mdx(\"p\", null, \"\\u81EA\\u6B64\\uFF0C\\u7528\\u6237\\u53EA\\u9700\\u8981\\u5173\\u5FC3\\u9700\\u8981\\u4EC0\\u4E48\\u72B6\\u6001\\uFF0C\\u5728\\u51FD\\u6570\\u91CC\\u9762\\u83B7\\u53D6\\u5230\\u8FD9\\u4E9B\\u72B6\\u6001\\uFF0C\\u6211\\u4EEC\\u80FD\\u591F\\u81EA\\u52A8\\u7684\\u8DDF\\u8E2A\\u53D8\\u66F4\\uFF0C\\u54CD\\u5E94\\u5F0F\\u89E6\\u53D1\\u6E32\\u67D3\\u4E86\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"const [isTitleChanged, isContentChanged] = useNovus(models => {\\n const { state } = models.noteModel\\n return [\\n state.isTitleChanged,\\n state.isContentChanged,\\n ]\\n})\\n\")), mdx(\"h3\", null, \"2.5 \\u8BA2\\u9605\\u89E6\\u53D1 \\u201C\\u5598\\u606F\\u673A\\u5236\\u201D \\uFF0CNovus \\u7248\\u672C\\u7684 Fiber\"), mdx(\"p\", null, \"\\u6700\\u540E\\u8FD9\\u4E2A\\u662F\\u4E00\\u4E2A\\u4E0D\\u662F\\u5F88\\u5F71\\u54CD\\u4F7F\\u7528\\uFF0C\\u4F46\\u662F\\u9700\\u8981\\u8003\\u8651\\u5230\\u7684\\u95EE\\u9898\\u3002\\u4E8B\\u5B9E\\u4E0A React \\u672C\\u8EAB\\u7684\\u6E32\\u67D3\\u673A\\u5236 Fiber\\uFF0C\\u5DF2\\u7ECF\\u88AB\\u5F88\\u591A\\u4EBA\\u719F\\u77E5\\u4E86\\u3002\\u6570\\u636E\\u5C42\\u7684\\u8BA2\\u9605\\u901A\\u77E5\\u662F\\u5728 Fiber \\u673A\\u5236\\u4E4B\\u524D\\uFF0C\\u8BA1\\u7B97\\u91CF\\u672C\\u4E0D\\u4F1A\\u5F88\\u5927\\uFF0C\\u4E0D\\u592A\\u4F1A\\u5F71\\u54CD\\u6E32\\u67D3\\u7684\\u8017\\u65F6\\uFF0C\\u611F\\u89C9\\u6CA1\\u6709\\u5FC5\\u8981\\u8003\\u8651\\u8FD9\\u4E9B\\u4E8B\\u60C5\\u3002\\u4F46\\u662F\\u4E07\\u4E00\\u5982\\u679C\\u7528\\u6237\\u7684\\u8BA1\\u7B97\\u51FD\\u6570\\u6D89\\u53CA\\u5230\\u7684\\u8BA1\\u7B97\\u6BD4\\u8F83\\u591A\\uFF0C\\u540C\\u65F6\\u8FD8\\u6709\\u975E\\u5E38\\u591A\\u7684\\u7EC4\\u4EF6\\u8BA2\\u9605\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u8FD9\\u91CC\\u8FD8\\u662F\\u4F1A\\u6709\\u4E00\\u70B9\\u70B9\\u7684\\u95EE\\u9898\\u7684\\u3002\"), mdx(\"p\", null, \"Fiber \\u89E3\\u51B3\\u7684\\u662F\\u89C6\\u56FE\\u5C42\\u66F4\\u65B0\\u5360\\u7528\\u6267\\u884C\\u6808\\u7684\\u95EE\\u9898\\uFF0Creact \\u901A\\u8FC7\\u9012\\u5F52\\u7684\\u65B9\\u5F0F\\u8FDB\\u884C\\u6E32\\u67D3\\u7EC4\\u4EF6\\u6811\\uFF0C\\u6574\\u4E2A\\u6267\\u884C\\u6D41\\u7A0B\\u4F1A\\u5217\\u961F\\u5728\\u6267\\u884C\\u6808\\u4E2D\\uFF0C\\u76F4\\u5230\\u6267\\u884C\\u5B8C\\u6BD5\\u624D\\u7B97\\u5B8C\\u3002Fiber \\u628A\\u8FD9\\u4E2A\\u9012\\u5F52\\u53D8\\u66F4\\u6210\\u4E86\\u94FE\\u5F0F\\u8C03\\u7528\\uFF0C\\u6267\\u884C\\u7684\\u987A\\u5E8F\\u4E0D\\u662F\\u5FC5\\u987B\\u5230\\u5E95\\uFF0C\\u53EF\\u4EE5\\u5728\\u6267\\u884C\\u65F6\\u95F4\\u8D85\\u8FC7 16ms \\u540E\\u628A\\u5269\\u4E0B\\u7684\\u6D41\\u7A0B\\u8F6C\\u5230\\u4E0B\\u4E00\\u4E2A\\u5B8F\\u4EFB\\u52A1\\u4E2D\\uFF0C\\u8FD9\\u6837\\u8BA9\\u6D4F\\u89C8\\u5668\\u68C0\\u67E5\\u5FAE\\u4EFB\\u52A1\\u548C\\u5176\\u4ED6\\u7684\\u5B8F\\u4EFB\\u52A1\\uFF0C\\u6BD4\\u5982\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C\\u548C\\u66F4\\u65B0\\u9875\\u9762\\u89C6\\u56FE\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u8FD9\\u91CC\\u7684\\u8BA2\\u9605\\u66F4\\u65B0\\u662F\\u7528\\u7684\\u8FED\\u4EE3\\uFF0C\\u540C\\u6837\\u4F1A\\u51FA\\u73B0\\u5360\\u7528\\u6267\\u884C\\u6808\\u7684\\u95EE\\u9898\\u3002\\u8003\\u8651\\u5B9E\\u73B0\\u65B9\\u6848\\uFF0C\\u4E00\\u65B9\\u9762\\u6570\\u7EC4\\u5982\\u679C\\u5143\\u7D20\\u6CA1\\u6709\\u53D1\\u751F\\u53D8\\u52A8\\u7684\\u8BDD\\uFF0C\\u53EF\\u4EE5\\u4FDD\\u5B58\\u8FED\\u4EE3\\u7684\\u5E8F\\u53F7\\uFF0C\\u4E0D\\u9700\\u8981\\u6539\\u6210\\u94FE\\u8868\\u4E5F\\u80FD\\u65AD\\u70B9\\u91CD\\u6765\\uFF0C\\u4F46\\u662F\\u8FD9\\u4E2A\\u65E0\\u6CD5\\u4FDD\\u8BC1\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u628A\\u8FED\\u4EE3\\u6539\\u6210\\u94FE\\u8868\\uFF0C\\u53EA\\u662F\\u4E3A\\u4E86\\u4FDD\\u7559\\u8FDB\\u5EA6\\u5F15\\u7528\\u7684\\u8BDD\\u5DE5\\u4F5C\\u91CF\\u5C31\\u6709\\u70B9\\u5927\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u770B\\u4E0B\\u65E7\\u7248\\u672C\\u4EE3\\u7801\\uFF0C\\u89E6\\u53D1\\u8BA2\\u9605\\u51FD\\u6570\\u7528\\u7684\\u662F\\u5FAA\\u73AF\\uFF0C\\u5373\\u4F7F\\u7528\\u5230\\u4E86\\u547D\\u540D\\u7A7A\\u95F4\\u7684\\u8FC7\\u6EE4\\uFF0C\\u5982\\u679C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"listeners\"), \" \\u8FD9\\u4E2A\\u5217\\u8868\\u4E2D\\u4FDD\\u5B58\\u7684\\u8BA2\\u9605\\u51FD\\u6570\\u8FC7\\u591A\\uFF08\\u56E0\\u4E3A\\u662F\\u5168\\u5C40\\u7684\\u6570\\u636E\\u5C42\\uFF0C\\u7EC4\\u4EF6\\u5F88\\u591A\\u7684\\u65F6\\u5019\\u8FD9\\u4E2A\\u6709\\u5F88\\u5927\\u53EF\\u80FD\\uFF09\\u3001\\u8BA1\\u7B97\\u91CF\\u5F88\\u5927\\u3001\\u5168\\u90FD\\u662F\\u540C\\u6B65 CPU \\u5BC6\\u96C6\\u578B\\u7684\\u8BA1\\u7B97\\uFF0C\\u90A3\\u4E48\\u8FD9\\u91CC\\u4F1A\\u51FA\\u73B0\\u6392\\u961F\\u73B0\\u8C61\\uFF0C\\u8017\\u65F6\\u5982\\u679C\\u8D85\\u8FC7 16ms\\uFF0C\\u4F1A\\u8BA9 JS \\u8FDB\\u7A0B\\u65E0\\u6CD5\\u6B63\\u5E38\\u8FDB\\u884C\\u4E8B\\u4EF6\\u5FAA\\u73AF\\uFF0C\\u6BD4\\u5982\\u68C0\\u67E5\\u5FAE\\u4EFB\\u52A1\\u4E2D\\u7684\\u56DE\\u8C03\\u5217\\u8868\\uFF0C\\u65E0\\u6CD5\\u54CD\\u5E94\\u7528\\u6237\\u7684\\u64CD\\u4F5C\\uFF0C\\u6240\\u4EE5\\u8FD9\\u91CC\\u786E\\u5B9E\\u5E94\\u8BE5\\u4F1A\\u88AB\\u89C6\\u4E3A\\u5361\\u987F\\u70B9\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"/**\\n * \\u89E6\\u53D1\\u5668\\uFF0C\\u66F4\\u65B0\\u5B8C\\u6570\\u636E\\u4ED3\\u4E4B\\u540E\\u5FC5\\u987B\\u89E6\\u53D1\\u624D\\u80FD\\u901A\\u77E5 UI \\u53D8\\u66F4\\n *\\n * @param namespace model \\u7684\\u547D\\u540D\\u7A7A\\u95F4 id\\uFF0C\\u53EA\\u4F1A\\u89E6\\u53D1\\u8BA2\\u9605\\u5BF9\\u5E94 model \\u7684 mapStatetoProps \\u51FD\\u6570\\u3002\\u7559\\u7A7A\\u8868\\u793A\\u89E6\\u53D1\\u5168\\u90E8\\n */\\nnotifyChangesListeners = (namespace?: string) => {\\n // TODO: \\u987A\\u5E8F\\u6267\\u884C\\u5168\\u90E8\\u7684\\u4E8B\\u4EF6\\u901A\\u77E5\\uFF0C\\u5982\\u679C\\u8FD9\\u4E2A\\u6BD4\\u8F83\\u591A\\uFF0C\\u53EF\\u80FD\\u76F4\\u63A5\\u963B\\u585E\\u4E86 CPU\\uFF0C\\u65E0\\u6CD5\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C\\uFF0C\\u9020\\u6210\\u5361\\u987F\\n this.listeners.forEach(v => {\\n if (\\n typeof namespace === \\\"undefined\\\" ||\\n v[1].length === 0 ||\\n v[1].includes(namespace)\\n ) {\\n v[0]()\\n }\\n })\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u5E94\\u8BE5\\u9002\\u5F53\\u7684\\u65F6\\u95F4\\u628A\\u5B8F\\u4EFB\\u52A1\\u7684\\u961F\\u5217\\u5207\\u5206\\u4E3A\\u591A\\u4E2A\\u5B8F\\u4EFB\\u52A1\\uFF0C\\u8BA9\\u5FAE\\u4EFB\\u52A1\\u548C\\u5176\\u4ED6\\u5B8F\\u4EFB\\u52A1\\u80FD\\u591F\\u7A7F\\u63D2\\u6267\\u884C\\uFF0C\\u8BA9\\u754C\\u9762\\u83B7\\u5F97 \\u201C\\u5598\\u606F\\u201D \\u673A\\u4F1A\\u3002\"), mdx(\"p\", null, \"\\u8003\\u8651\\u5230\\u8FD9\\u8FB9\\u7684\\u8C03\\u7528\\u65B9\\u6848\\u4E5F\\u4E0D\\u662F\\u6811\\u5F62\\u7684\\u5F62\\u5F0F\\uFF0C\\u6240\\u4EE5\\u6211\\u8FD9\\u8FB9\\u91C7\\u53D6\\u4E86\\u4E0D\\u4E00\\u6837\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"notifyChangesListeners = (namespace?: string) => {\\n this.listeners.forEach((v, key) => {\\n if (typeof namespace === \\\"undefined\\\" || v[1].length === 0 || v[1].includes(namespace)) {\\n // \\u5C06\\u9700\\u8981\\u901A\\u77E5\\u7684\\u51FD\\u6570\\u653E\\u8FDB\\u961F\\u5217\\u7B49\\u5F85\\u901A\\u77E5\\n this.needNotifiedListeners.add(key);\\n }\\n });\\n // \\u5148\\u628A\\u9700\\u8981\\u7684\\u5DE5\\u4F5C\\u8BB0\\u5F55\\uFF0C\\u53EF\\u4EE5\\u88AB\\u6253\\u65AD\\uFF0C\\u7136\\u540E\\u518D\\u901A\\u77E5\\u5404\\u4E2A\\u8BA2\\u9605\\n this.startNotifies();\\n};\\n// \\u4E00\\u4E2A\\u5F85\\u6E32\\u67D3\\u5DE5\\u4F5C\\u6C60\\nneedNotifiedListeners = new Set([]);\\nstartNotiTime: number;\\n// \\u88AB\\u89E6\\u53D1\\u5C31\\u4F1A\\u4E00\\u76F4\\u6309\\u7167\\u540E\\u9762\\u7684\\u903B\\u8F91\\u6267\\u884C\\uFF0C\\u76F4\\u5230\\u6E32\\u67D3\\u5DE5\\u4F5C\\u6C60\\u6E05\\u7A7A\\nstartNotifies = () => {\\n // \\u5982\\u679C\\u4E4B\\u524D\\u7684\\u9057\\u7559\\u8FD8\\u5728\\uFF0C\\u5148\\u53D6\\u6D88\\uFF0C\\u5728\\u8FD9\\u6B21\\u6E32\\u67D3\\u4E2D\\u7EE7\\u7EED\\n if(idleHandler) _cancelIdleCallback(idleHandler);\\n // \\u6267\\u884C\\u4E4B\\u524D\\u5148\\u6807\\u8BB0\\u4E0B\\u65F6\\u95F4\\uFF0C\\u5728\\u9012\\u5F52\\u7684\\u8FC7\\u7A0B\\u4E2D\\u4F5C\\u4E3A\\u65F6\\u95F4\\u6807\\u8BB0\\n this.startNotiTime = new Date().getTime();\\n // \\u53BB\\u6267\\u884C\\u5224\\u65AD\\u903B\\u8F91\\n this.doTheNotifies();\\n};\\n// \\u786E\\u5B9E\\u53BB\\u901A\\u77E5\\u8BA2\\u9605\\u7684\\u90E8\\u5206\\uFF0C\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u6267\\u884C\\u53EF\\u80FD\\u5728\\u4E0D\\u540C\\u7684\\u5B8F\\u4EFB\\u52A1\\u961F\\u5217\\u88AB\\u6267\\u884C\\ndoTheNotifies = () => {\\n if (this.needNotifiedListeners.size > 0) {\\n const nextId = this.needNotifiedListeners.values().next().value;\\n // \\u5148\\u5220\\u9664\\u7D22\\u5F15\\uFF0C\\u5728\\u540E\\u9762\\u6267\\u884C\\u7684\\u8FC7\\u7A0B\\u4E2D\\u5982\\u679C\\u8FD9\\u4E2A\\u8BA2\\u9605\\u53C8\\u88AB\\u8C03\\u7528\\u4E86\\uFF0C\\u6709\\u91CD\\u65B0\\u6267\\u884C\\u7684\\u673A\\u4F1A\\n this.needNotifiedListeners.delete(nextId);\\n\\n // \\u5B9E\\u9645\\u6267\\u884C\\u7684\\u90E8\\u5206\\uFF0C\\u53EF\\u80FD\\u7684\\u8017\\u65F6\\u64CD\\u4F5C\\n this.listeners.get(nextId)[0]();\\n \\n // \\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\uD83D\\uDC47\\n // \\u5982\\u679C\\u8FD0\\u884C\\u5B8C\\u7528\\u6237\\u7684\\u8BA1\\u7B97\\u4E4B\\u540E\\u8FD8\\u6709\\u65F6\\u95F4\\uFF0C\\u7EE7\\u7EED\\u9012\\u5F52\\uFF0C\\u5426\\u5219\\u7B49\\u5F85\\u4E0B\\u4E00\\u6B21\\u5B8F\\u4EFB\\u52A1\\n if (new Date().getTime() - this.startNotiTime < 16) {\\n this.doTheNotifies();\\n } else {\\n idleHandler = _requestIdleCallback(this.startNotifies);\\n }\\n // \\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\uD83D\\uDC46\\n }\\n};\\n\")), mdx(\"p\", null, \"\\u6539\\u8FDB\\u7684\\u601D\\u8DEF\\u662F\\uFF0C\\u4ECE\\u4E4B\\u524D\\u8FED\\u4EE3\\u50BB\\u50BB\\u7684\\u76F4\\u63A5\\u53BB\\u6267\\u884C\\u8BA2\\u9605\\uFF0C\\u53D8\\u6210\\u8FED\\u4EE3\\u653E\\u5230\\u5F85\\u901A\\u77E5\\u5217\\u8868\\u4E2D\\uFF0C\\u8BA9\\u6267\\u884C\\u6808\\u53BB\\u8FED\\u4EE3\\u6267\\u884C\\uFF0C\\u5728\\u6BCF\\u6B21\\u6267\\u884C\\u7ED3\\u675F\\u540E\\u68C0\\u67E5\\u4ECE\\u5F00\\u59CB\\u5230\\u73B0\\u5728\\u662F\\u4E0D\\u662F\\u8D85\\u65F6\\u4E86\\uFF0C\\u6CA1\\u6709\\u7684\\u8BDD\\u9012\\u5F52\\u8FD0\\u884C\\u3002\\u4F46\\u662F\\u5982\\u679C\\u8D85\\u65F6\\u4E86\\uFF0C\\u90A3\\u4E48\\u628A\\u4E0B\\u4E2A\\u5FAA\\u73AF\\u518D\\u5904\\u7406\\u8FD9\\u4E2A\\u5F85\\u6267\\u884C\\u5217\\u8868\\uFF0C\\u56E0\\u4E3A\\u5168\\u5C40\\u7EF4\\u62A4\\u7684\\u662F\\u540C\\u4E00\\u4E2A\\u5217\\u8868\\uFF0C\\u6240\\u4EE5\\u5982\\u679C\\u591A\\u6B21\\u89E6\\u53D1\\u901A\\u77E5\\u5217\\u8868\\u7684\\u751F\\u6210\\uFF0C\\u4E5F\\u4E0D\\u4F1A\\u9020\\u6210\\u91CD\\u590D\\u901A\\u77E5\\u7684\\u60C5\\u51B5\\u3002\"), mdx(\"p\", null, \"\\u6574\\u4E2A\\u7ED3\\u679C\\u4E0A\\u770B\\uFF0C\\u5C31\\u662F\\u901A\\u77E5\\u8BA2\\u9605\\u7684\\u65F6\\u5019\\uFF0C\\u7528\\u6237\\u5982\\u679C\\u7EC4\\u4EF6\\u6BD4\\u8F83\\u591A\\uFF0C\\u5176\\u4E2D\\u4E00\\u4E9B\\u7EC4\\u4EF6\\u83B7\\u5F97\\u4E86\\u901A\\u77E5\\uFF0C\\u5B8C\\u6210\\u6E32\\u67D3\\uFF0C\\u8BA1\\u7B97\\u8D85\\u65F6\\u4E86\\uFF0C\\u90A3\\u4E48\\u7EC4\\u4EF6\\u7B49\\u5F85\\u4E0B\\u6B21\\u7A7A\\u95F2\\u518D\\u66F4\\u65B0\\uFF0C\\u628A\\u6574\\u4E2A\\u961F\\u5217\\u5207\\u7247\\u6210\\u5F88\\u591A\\u9636\\u6BB5\\u3002\"), mdx(\"p\", null, \"\\u603B\\u7684\\u6765\\u8BF4\\uFF0C\\u6539\\u8FDB\\u65B9\\u6848\\u867D\\u7136\\u6267\\u884C\\u7684\\u4EE3\\u7801\\u6CA1\\u6709\\u51CF\\u5C11\\uFF0C\\u4F46\\u662F\\u4ECE\\u6574\\u4E2A\\u8C03\\u5EA6\\u7684\\u89D2\\u5EA6\\u6765\\u770B\\uFF0C\\u5404\\u4E2A\\u4EFB\\u52A1\\u7A7F\\u63D2\\u8FDB\\u884C\\uFF0C\\u4F53\\u9A8C\\u4F1A\\u597D\\u5F88\\u591A\\uFF0C\\u5C24\\u5176\\u5BF9\\u4E8E\\u7EC6\\u7C92\\u5EA6\\u7684\\u7EC4\\u4EF6\\u7684\\u5927\\u578B\\u5E94\\u7528\\uFF0C\\u4F53\\u9A8C\\u7684\\u4F18\\u5316\\u4E00\\u5B9A\\u662F\\u6B63\\u5411\\u7684\\u3002\"), mdx(\"h3\", null, \"2.6 \\u5B8C\\u5584\\u7684\\u6D4B\\u8BD5\"), mdx(\"p\", null, \"\\u6D4B\\u8BD5\\u662F\\u4FDD\\u8BC1\\u5065\\u58EE\\u6027\\u7684\\u57FA\\u7840\\uFF0C\\u5BF9\\u4E8E\\u8FD9\\u4E2A\\u57FA\\u7840\\u5E93\\u6765\\u8BF4\\uFF0C\\u6574\\u4E2A\\u6570\\u636E\\u5C42\\u7684\\u673A\\u5236\\u5F71\\u54CD\\u6574\\u4E2A\\u5E94\\u7528\\u7684\\u8FD0\\u884C\\uFF0C\\u6240\\u4EE5\\u8BA2\\u9605\\u673A\\u5236\\u3001\\u6027\\u80FD\\u95EE\\u9898\\u3001\\u7EC4\\u4EF6\\u6E32\\u67D3\\u89E6\\u53D1\\u7B49\\u90FD\\u662F\\u9700\\u8981\\u4FDD\\u8BC1\\u80FD\\u8D70\\u5F97\\u901A\\uFF0C\\u5404\\u4E2A\\u8FB9\\u754C\\u6761\\u4EF6\\u90FD\\u9700\\u8981\\u6D4B\\u8BD5\\u53EF\\u884C\\uFF0C\\u6240\\u4EE5\\u4E00\\u4E2A\\u5B8C\\u5584\\u7684\\u6D4B\\u8BD5\\u975E\\u5E38\\u6709\\u5FC5\\u8981\\uFF0C\\u867D\\u7136\\u4F7F\\u7528\\u7075\\u6D3B\\u6027\\u592A\\u5927\\u53EF\\u80FD\\u65E0\\u6CD5\\u8986\\u76D6\\u5230\\u5168\\u90E8\\u7684\\u573A\\u666F\\u3002\"), mdx(\"p\", null, \"\\u540C\\u65F6\\u6D4B\\u8BD5\\u4E5F\\u662F\\u4FDD\\u8BC1\\u91CD\\u6784\\u4EE3\\u7801\\u6B63\\u786E\\u7684\\u57FA\\u7840\\uFF0C\\u6BD4\\u5982\\u8FD9\\u6B21\\u6539\\u8FDB\\u6D41\\u7A0B\\uFF0C\\u5C31\\u662F\\u5148\\u628A\\u6D4B\\u8BD5\\u6D41\\u7A0B\\u8D70\\u901A\\uFF0C\\u6DFB\\u52A0\\u65B0\\u529F\\u80FD\\u548C\\u6539\\u8FDB\\u539F\\u6709\\u903B\\u8F91\\u7684\\u65F6\\u5019\\uFF0C\\u8FD9\\u4E9B\\u6D4B\\u8BD5\\u4E00\\u76F4\\u5728\\u5E2E\\u6211\\u9A8C\\u8BC1\\u903B\\u8F91\\u7684\\u6B63\\u786E\\u6027\\uFF0C\\u5E76\\u4FDD\\u8BC1\\u6211\\u5168\\u90E8\\u7684\\u9700\\u6C42\\u90FD\\u80FD\\u8986\\u76D6\\u5E76\\u6B63\\u786E\\u5B9E\\u73B0\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"588px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/298aeb086997d204b9b4304a44bc3c64/42c2d/test.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"142.0849420849421%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAcCAYAAABh2p9gAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAD6klEQVRIx4VV23LbNhDlb1QiwStIELyTkijFduy6bpyHdiYz7Uyn7Vv//x9Oz4KiIyW287BDAAQWu+ecXXjhP08o//sd4zDi9vYO8zzjdDphHEdorZFlGdI0RZ7n0LR1XhQF8mKZB0EApZQzL8xSNIcJx9MHOplQGLMcprN1k+/775rsEadi3na7hUpjWGthqwpVXbtxpjN3e5IkVxG8ZlcRRnGMpu8wDAOdaKZROEeyLpdJBHJg/a72raNrh2OP/eHA6CoYplwzShlLtGVZLnNGLxnIf8FPXTi7ilBS6uhQM8WEYAvgabakq3XuUpa17EyQzGMGseJ3Ga3DUIUhisaibVt3u0RREsO6aRZcHbb2BeP1m58Zj6LoOkKfk9hotF2Hhk4lzY6Yrml2Xe/G63wdd9wvAYiULtOmQx+RThxWYqY0LorybPbC1j2yLjC8mrLgNhz2OJCUmYKWdPSZbYfdGU+xVZ/LXCMkXN8yTQwV8qp0GDrchEkXaekcCgmrFl+IuJDQd7KJheVpRE8djvxKyV1GJYyKXab1njmW01xTWwvAxVnYkpqLTAUuNXEYRqEbr7ZGFaqvY68qWWZxSqEqt6lgwQuz1hRoCMHQCuNkt6rR1oukWse4Rd/3C1TnAghIsJd1FbK+QlwwvSiGocOi4cGpgbEG5aGnE0ZPnKt9B00y7Ny7JqK1WOGykoxcysHOQt11UCXbkB9AxxH8lgz/undyUl9OyKzGtqGQnw9QW8rstxNMlaI0AYpcXcnHU9ysHkdngaFMRPmWJXbTIRJ8eJk49A1J4pripdHHgdGn6LsQTc0A/K9a9MKmQPTHLaI/7xB+7Km1DKo1Lppkw8NPO+Q98eG+/NMBIbFOGWHKfduNMHtNkhcyokiniPLUtayMJt+Ea4lIhgcz+Z/wH0tUajcppGsnbrzaKnJPk00jbcsuYjZNzbHlt0LBtaZuHJNiUssiLyNmymvjWdG0Fz/PSP99RHKoEbclkr8fkDxOSP66R7wj+ypaWta5bb1nEqXnzxU2NzV+Ctidcwr58x7+3mL7NGCr2fc22x++KZe90avYXMd5j924gx3Zku73qHYsw9sj2mlwgrW2euk+b5n0AMnEe3j4Bc/PnzH2fFNmSuTLLfSpxzzxkt1uKanwuuTeMsfyfDy5J1QmcstxPjrQK/eu1Lw1fvVRerM5TNMOA2u3lVqlmbxwcsmyhGVGufDmS5zWl/DNV68/7dE/3mD6+YYsG/isAJXm8GNKod2jHSY6T11Dlf4omErdrk6/cyi17H8asR0KBEOJ8EONyA6I63tE9R31uKMGG/feiLPj8eh65mazedXh/5a6JOvtPnFhAAAAAElFTkSuQmCC')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"测试结果\",\n \"title\": \"测试结果\",\n \"src\": \"/static/298aeb086997d204b9b4304a44bc3c64/42c2d/test.png\",\n \"srcSet\": [\"/static/298aeb086997d204b9b4304a44bc3c64/2c191/test.png 259w\", \"/static/298aeb086997d204b9b4304a44bc3c64/86b01/test.png 518w\", \"/static/298aeb086997d204b9b4304a44bc3c64/42c2d/test.png 588w\"],\n \"sizes\": \"(max-width: 588px) 100vw, 588px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u6D4B\\u8BD5\\u7ED3\\u679C\"), \"\\n \")), mdx(\"p\", null, \"\\u5DE5\\u5177\\u7528\\u7684\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Jest\"), \" + \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@testing-library/react\"), \" \\u5F88\\u597D\\u7684\\u5B9E\\u73B0\\u5168\\u90E8\\u7684\\u76EE\\u6807\\u9700\\u6C42\\uFF0C\\u6E32\\u67D3\\u9884\\u671F\\u4E5F\\u90FD\\u7B26\\u5408\\uFF0C\\u8FD9\\u6837\\u7684\\u7ED3\\u679C\\u80FD\\u591F\\u8BA9\\u6211\\u80FD\\u591F\\u6BD4\\u8F83\\u81EA\\u4FE1\\u7684\\u76F4\\u63A5\\u5728\\u56E2\\u961F\\u9879\\u76EE\\u4E2D\\u5F15\\u5165\\uFF0C\\u76F8\\u4FE1\\u8FD9\\u4E2A\\u6570\\u636E\\u5C42\\u80FD\\u591F\\u53EF\\u9760\\u7684\\u652F\\u6491\\u8D77\\u9879\\u76EE\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001 \\u4EE3\\u7801\"), mdx(SourceCodeLink, {\n url: \"https://cnb.cool/ubug/novus/novus\",\n name: \"NOVUS\",\n desc: \"\\uD83D\\uDCE6 \\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42\",\n mdxType: \"SourceCodeLink\"\n }));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"4b47ec34-72a4-53b3-bcc7-635b1d884359","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/learn-from-chrome/learn-from-chrome.md","id":"80f622c2-3eb0-505b-9993-46d05150698a","parent":{"name":"learn-from-chrome","sourceInstanceName":"blog"},"excerpt":"想让读者了解的事情 在阅读这篇关于 Chrome 技术实现的文章前，希望你能理解： 标准化的力量 - 原生 Web 标准往往是最优的解决方案 组件化的本质 - Web Components 提供了真正的封装和复用能力 未来技术的前瞻性 - 理解新技术趋势对技术选型的重要性 工程化的平衡 - 性能、开发体验、可维护性之间的权衡 学习的方法论 - 从优秀项目中汲取经验，举一反三 PS: 在你的 Chrome 浏览器里面输入 chrome://welcome…","fields":{"title":"🍻 跟着 Chrome 学技术","slug":"/blog/learn-from-chrome","description":"Chrome 是一个很优秀的浏览器，好奇查看了一些页面的源代码，发现很多我们值得学习的技术和能力，面向大佬编程，奥利给！","date":"2020-11-17","redirects":null,"datetime":"2020-11-17 22:50:20","categories":["code"],"series":null,"tags":["整理","思考","功能"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","思考","功能"],"theme":null,"slug":"learn-from-chrome","date":"2020-11-17 22:50:20"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"learn-from-chrome\",\n \"title\": \"🍻 跟着 Chrome 学技术\",\n \"date\": \"2020-11-17 22:50:20\",\n \"author\": \"Ubug\",\n \"description\": \"Chrome 是一个很优秀的浏览器，好奇查看了一些页面的源代码，发现很多我们值得学习的技术和能力，面向大佬编程，奥利给！\",\n \"categories\": [\"code\"],\n \"tags\": [\"整理\", \"思考\", \"功能\"],\n \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h2\", null, \"\\u60F3\\u8BA9\\u8BFB\\u8005\\u4E86\\u89E3\\u7684\\u4E8B\\u60C5\"), mdx(\"p\", null, \"\\u5728\\u9605\\u8BFB\\u8FD9\\u7BC7\\u5173\\u4E8E Chrome \\u6280\\u672F\\u5B9E\\u73B0\\u7684\\u6587\\u7AE0\\u524D\\uFF0C\\u5E0C\\u671B\\u4F60\\u80FD\\u7406\\u89E3\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6807\\u51C6\\u5316\\u7684\\u529B\\u91CF\"), \" - \\u539F\\u751F Web \\u6807\\u51C6\\u5F80\\u5F80\\u662F\\u6700\\u4F18\\u7684\\u89E3\\u51B3\\u65B9\\u6848\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u7EC4\\u4EF6\\u5316\\u7684\\u672C\\u8D28\"), \" - Web Components \\u63D0\\u4F9B\\u4E86\\u771F\\u6B63\\u7684\\u5C01\\u88C5\\u548C\\u590D\\u7528\\u80FD\\u529B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u672A\\u6765\\u6280\\u672F\\u7684\\u524D\\u77BB\\u6027\"), \" - \\u7406\\u89E3\\u65B0\\u6280\\u672F\\u8D8B\\u52BF\\u5BF9\\u6280\\u672F\\u9009\\u578B\\u7684\\u91CD\\u8981\\u6027\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5DE5\\u7A0B\\u5316\\u7684\\u5E73\\u8861\"), \" - \\u6027\\u80FD\\u3001\\u5F00\\u53D1\\u4F53\\u9A8C\\u3001\\u53EF\\u7EF4\\u62A4\\u6027\\u4E4B\\u95F4\\u7684\\u6743\\u8861\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5B66\\u4E60\\u7684\\u65B9\\u6CD5\\u8BBA\"), \" - \\u4ECE\\u4F18\\u79C0\\u9879\\u76EE\\u4E2D\\u6C72\\u53D6\\u7ECF\\u9A8C\\uFF0C\\u4E3E\\u4E00\\u53CD\\u4E09\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS: \\u5728\\u4F60\\u7684 Chrome \\u6D4F\\u89C8\\u5668\\u91CC\\u9762\\u8F93\\u5165 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"chrome://welcome/\"\n }, \"chrome://welcome/\"), \"\\uFF0C\\u6211\\u4EEC\\u4ECE\\u8FD9\\u91CC\\u5F00\\u59CB\")), mdx(\"h2\", null, \"\\u4E00\\u3001\\u89C2\\u5176\\u884C\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"950px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/53aebb0377abf73033da6d1e0a0b9a5b/444ca/index.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"47.10424710424711%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABnElEQVQoz21SW3KjMBDkJokBgZ4gwDyMY2xMHCeV/djk/nfpbZTE5a3KR9eoRpqe7hlFxjj0w4iu36GqWySJwMPDI6qqwfF0Zn4M+brpsG17+GqL0jc8D7DOQykLpS2Ksg530fpw3E9MOmS5DpfSWDgSVt7D8pwmMTZxgk2SsmFCpIiJVAgIkQWkaYpcSkTKD5gv71iWS+iaSw1tDEx/wDQvuB52VLeFNwqlytjQQOY5cpEGkq8GXxBsEKlqj2l5x8xiR9mrQmNZ1E2oqfCpJFHpMRQGg5PoGDun0BNeS2QkuRFmGaLpOOLj8wPz+RldN3AONWxRoqk9qraBJJn1BXMOZiX4VrWq+0HynQsK973C2/WM6+ufsIB1yNZSpZKwlUcmFYwUsEpASxGK4jj5z2p6TzgOBi+XE/ZPJ1otg+WyKGj5gLLdoafSgttrjITTmm8sdC5uJDeVP4SHncbn3zfMyzWsfv1Gha+Q+y0Ut+ZkBsloGG1OMBpG8Qthts6w5bd5ubxS4ZF/rw0KRRh0HKzFwVYc4j3urd4r/Ad0ZhG5M6mpmQAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"index.html\",\n \"title\": \"index.html\",\n \"src\": \"/static/53aebb0377abf73033da6d1e0a0b9a5b/444ca/index.png\",\n \"srcSet\": [\"/static/53aebb0377abf73033da6d1e0a0b9a5b/2c191/index.png 259w\", \"/static/53aebb0377abf73033da6d1e0a0b9a5b/86b01/index.png 518w\", \"/static/53aebb0377abf73033da6d1e0a0b9a5b/444ca/index.png 950w\"],\n \"sizes\": \"(max-width: 950px) 100vw, 950px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"index.html\"), \"\\n \")), mdx(\"p\", null, \"\\u80FD\\u770B\\u5230\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7528\\u4E86 ES Module\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7528\\u4E86 Web Component\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7528\\u4E86\\u6697\\u9ED1\\u7684 CSS Query\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7528\\u4E86 CSS \\u53D8\\u91CF\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"css \\u5C45\\u7136\\u653E\\u5230\\u4E86\\u6700\\u540E \\uD83D\\uDC7F\\uD83D\\uDC7E\\uD83D\\uDC80\")), mdx(\"p\", null, \"\\u4EE3\\u7801\\u5F88\\u7B80\\u6D01\\uFF0C\\u4E3B\\u8981\\u662F\\u56E0\\u4E3A\\u7528\\u4E86 Web Component\\uFF1B\\u7528\\u4E86\\u5F88\\u591A\\u65B0\\u7684\\u6280\\u672F\\uFF0C\\u56E0\\u4E3A\\u8DDF\\u6D4F\\u89C8\\u5668\\u7ED1\\u5B9A\\uFF0C\\u5012\\u662F\\u4E00\\u70B9\\u4E0D\\u7528\\u62C5\\u5FC3\\u517C\\u5BB9\\u95EE\\u9898 \\uD83D\\uDE02\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"956px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/adf8d3384c531600a5e1f8ca9f2df775/89866/app.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"59.45945945945946%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAA7DAAAOwwHHb6hkAAACIUlEQVQoz2WTa27bMBCEdZQ0Fp+SKFLU244TN7ZT1EiDBr3/VaZDOm5T9MdgKQn8PDu7LrSxmOYtxmlF6AYIqWGrGrEfUdUN5eDaDp7fYj+h9TE/p3PtArSpYWyd3yUVPkRsd4+oKgepLD9W6LoZoeow6jsM+h5rrfDoDZZGY+d0rrFScEZCK4VSCJRlCcVzoZseu+cLTscz+mFBchzaGUvY4XU0eJsavMQK587iidBgFRotYKSAFGUGbTabLEFwYf2Mh9MbgafcjmG7Q1wRmxEHrzIouUkQT0fJzd39Bl+SCLn/gCUleLFuZ7y//8Dx9I1ZLnA+IIYBni5tnOBcj8GyzVpgZutbtjyyRiv5IxKKLjUlPpwWMRh8f9nhdL5gWXfM0WBghkP/hGr7FfVygJ/2mPoBawzYjxG76DHzPLsa+/aaa2QUmjEUPVt6vRzwsH9Gw6lJbdB3I7xnnsMWul/pdEFdBUy1IcBgJSBUOgOMpDtR/m15iAa/fh7Z8oVr03NlHNrWEWBRGV5SEkbrPEEhU4aSVUEmpQmX4pphbpnAwEEcn895dQKzS3vnvYetW5jGw/BZG0OAvLr4NISrq82fSWeHFS82ruOlCkonWQK5sFxWyZ1UfJ+d0UmCiuRQ3M7iH1gGpk1PIGObrAT2bcvpUq3nwte55SSZQTfJXP8D3kA3JUeRWXYEBtcwS/5zqL6xsATUSsBxJ+1HTUP5DPwNdpNuDprnnEQAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"welcome_app.js\",\n \"title\": \"welcome_app.js\",\n \"src\": \"/static/adf8d3384c531600a5e1f8ca9f2df775/89866/app.png\",\n \"srcSet\": [\"/static/adf8d3384c531600a5e1f8ca9f2df775/2c191/app.png 259w\", \"/static/adf8d3384c531600a5e1f8ca9f2df775/86b01/app.png 518w\", \"/static/adf8d3384c531600a5e1f8ca9f2df775/89866/app.png 956w\"],\n \"sizes\": \"(max-width: 956px) 100vw, 956px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"welcome_app.js\"), \"\\n \")), mdx(\"p\", null, \"\\u80FD\\u770B\\u5230\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u662F\\u4E00\\u4E2A SPA \\u5E94\\u7528\\uFF0C\\u540E\\u7EED\\u7684\\u529F\\u80FD\\u90FD\\u5728\\u8FD9\\u4E00\\u4E2A\\u9875\\u9762\\u91CC\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7528\\u4E86 Polymer.js \\u4F5C\\u4E3A Web Component \\u6846\\u67B6\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5728 cr_elements \\u91CC\\u5E94\\u8BE5\\u662F\\u7EC4\\u4EF6\\u5E93\\uFF0CWeb Component \\u89C4\\u8303\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u81EA\\u884C\\u5B9E\\u73B0\\u4E86\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u8DEF\\u7531\\u884C\\u4E3A\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7528\\u4E86 JSDoc\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5B9A\\u4E49\\u4E86\\u4E00\\u5957 Proxy \\u673A\\u5236\\u548C\\u539F\\u751F\\u7684\\u6D4F\\u89C8\\u5668\\u901A\\u4FE1\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6CA1\\u6709\\u4F7F\\u7528\\u9884\\u7F16\\u8BD1\\u6253\\u5305\\uFF01\")), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u8BE6\\u5176\\u4E49\"), mdx(\"h3\", null, \"2.1 Web Component + ES Module\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u5F00\\u53D1\\u6A21\\u5F0F\\u5E94\\u8BE5\\u7B97\\u662F\\u9762\\u5411\\u6D4F\\u89C8\\u5668\\u6807\\u51C6\\u4E86\\uFF0C\\u7EC4\\u4EF6\\u5316\\u5F00\\u53D1\\u76DB\\u884C\\u7684\\u73B0\\u5728\\uFF0C\\u539F\\u751F ES \\u6807\\u51C6\\u7ED9\\u51FA\\u7684\\u7B54\\u6848\\u597D\\u50CF\\u662F WebComponent \\u7684\\u5E94\\u7528\\uFF0C\\u4E4B\\u524D\\u5C1D\\u8BD5\\u8FC7\\uFF0C\\u611F\\u89C9\\u8FD8\\u662F\\u4E0D\\u9519\\u7684\\uFF0C\\u4E0D\\u8FC7\\u9700\\u8981\\u6709\\u66F4\\u53CB\\u597D\\u7684\\u5F00\\u53D1\\u5DE5\\u5177\\u624D\\u80FD\\u66F4\\u8212\\u670D\\uFF0C\\u800C\\u4E14\\u517C\\u5BB9\\u6027\\u7684\\u95EE\\u9898\\u77ED\\u65F6\\u95F4\\u5185\\u8FD8\\u65E0\\u6CD5\\u5B8C\\u5168\\u8BA9\\u4EBA\\u653E\\u5FC3\\uFF0C\\u4E0D\\u8FC7\\u9762\\u5411\\u672A\\u6765\\u7684\\u65B9\\u6848\\u8FD8\\u662F\\u5F88\\u503C\\u5F97\\u6295\\u5165\\u8C03\\u7814\\u7684\\u3002\"), mdx(\"h3\", null, \"2.2 \\u6280\\u672F\\u9009\\u578B\\u7684\\u542F\\u793A\"), mdx(\"p\", null, \"Chrome \\u7684\\u6280\\u672F\\u5B9E\\u73B0\\u7ED9\\u6211\\u4EEC\\u5E26\\u6765\\u51E0\\u4E2A\\u91CD\\u8981\\u542F\\u793A\\uFF1A\"), mdx(\"h4\", null, \"1. \\u6807\\u51C6\\u4F18\\u5148\"), mdx(\"p\", null, \"Chrome \\u56E2\\u961F\\u9009\\u62E9\\u4E86\\u539F\\u751F\\u7684 Web \\u6807\\u51C6\\uFF0C\\u800C\\u4E0D\\u662F\\u4F9D\\u8D56\\u7B2C\\u4E09\\u65B9\\u6846\\u67B6\\u3002\\u8FD9\\u6837\\u505A\\u7684\\u597D\\u5904\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u65E0\\u989D\\u5916\\u4F9D\\u8D56\"), \"\\uFF1A\\u51CF\\u5C11\\u5305\\u4F53\\u79EF\\uFF0C\\u63D0\\u9AD8\\u52A0\\u8F7D\\u901F\\u5EA6\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u66F4\\u597D\\u7684\\u517C\\u5BB9\\u6027\"), \"\\uFF1A\\u6D4F\\u89C8\\u5668\\u539F\\u751F\\u652F\\u6301\\uFF0C\\u4E0D\\u7528\\u62C5\\u5FC3\\u7248\\u672C\\u95EE\\u9898\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u672A\\u6765\\u53EF\\u7EF4\\u62A4\\u6027\"), \"\\uFF1A\\u6807\\u51C6\\u662F\\u7A33\\u5B9A\\u7684\\uFF0C\\u4E0D\\u4F1A\\u9891\\u7E41\\u53D8\\u5316\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6027\\u80FD\\u4F18\\u52BF\"), \"\\uFF1A\\u539F\\u751F\\u5B9E\\u73B0\\u901A\\u5E38\\u6BD4\\u6846\\u67B6\\u66F4\\u9AD8\\u6548\")), mdx(\"h4\", null, \"2. \\u7EC4\\u4EF6\\u5316\\u601D\\u7EF4\"), mdx(\"p\", null, \"Web Components \\u63D0\\u4F9B\\u4E86\\u771F\\u6B63\\u7684\\u5C01\\u88C5\\u80FD\\u529B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// \\u81EA\\u5B9A\\u4E49\\u5143\\u7D20\\u7684\\u5B9E\\u73B0\\u793A\\u4F8B\\nclass WelcomeElement extends HTMLElement {\\n constructor() {\\n super();\\n this.attachShadow({ mode: 'open' });\\n this.render();\\n }\\n\\n render() {\\n this.shadowRoot.innerHTML = `\\n \\n \\n `;\\n }\\n}\\n\\ncustomElements.define('welcome-element', WelcomeElement);\\n\")), mdx(\"h4\", null, \"3. \\u5F00\\u53D1\\u4F53\\u9A8C\\u7684\\u5E73\\u8861\"), mdx(\"p\", null, \"Chrome \\u6E90\\u7801\\u4E2D\\u7684\\u4E00\\u4E9B\\u8BBE\\u8BA1\\u8003\\u8651\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u4EE3\\u7801\\u7B80\\u6D01\"), \"\\uFF1A\\u4F7F\\u7528\\u9AD8\\u7EA7\\u62BD\\u8C61\\uFF0C\\u51CF\\u5C11\\u5197\\u4F59\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6587\\u6863\\u5B8C\\u6574\"), \"\\uFF1AJSDoc \\u63D0\\u4F9B\\u4E86\\u826F\\u597D\\u7684\\u4EE3\\u7801\\u6587\\u6863\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6A21\\u5757\\u5316\"), \"\\uFF1A\\u6E05\\u6670\\u7684\\u6A21\\u5757\\u5212\\u5206\\uFF0C\\u804C\\u8D23\\u660E\\u786E\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6E10\\u8FDB\\u589E\\u5F3A\"), \"\\uFF1A\\u4ECE\\u57FA\\u7840\\u529F\\u80FD\\u5F00\\u59CB\\uFF0C\\u9010\\u6B65\\u6DFB\\u52A0\\u9AD8\\u7EA7\\u7279\\u6027\")), mdx(\"h3\", null, \"2.3 \\u67B6\\u6784\\u8BBE\\u8BA1\\u7684\\u601D\\u8003\"), mdx(\"h4\", null, \"\\u5355\\u9875\\u5E94\\u7528\\u7684\\u8BBE\\u8BA1\"), mdx(\"p\", null, \"Chrome \\u6B22\\u8FCE\\u9875\\u91C7\\u7528 SPA \\u6A21\\u5F0F\\uFF0C\\u8FD9\\u80CC\\u540E\\u6709\\u5176\\u6DF1\\u5C42\\u539F\\u56E0\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u4E00\\u81F4\\u6027\\u4F53\\u9A8C\"), \"\\uFF1A\\u6240\\u6709\\u529F\\u80FD\\u5728\\u540C\\u4E00\\u4E2A\\u4E0A\\u4E0B\\u6587\\u4E2D\\uFF0C\\u907F\\u514D\\u9875\\u9762\\u8DF3\\u8F6C\\u7684\\u5272\\u88C2\\u611F\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6027\\u80FD\\u4F18\\u5316\"), \"\\uFF1A\\u51CF\\u5C11\\u91CD\\u590D\\u52A0\\u8F7D\\uFF0C\\u63D0\\u9AD8\\u54CD\\u5E94\\u901F\\u5EA6\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u72B6\\u6001\\u7BA1\\u7406\"), \"\\uFF1A\\u5168\\u5C40\\u72B6\\u6001\\u66F4\\u5BB9\\u6613\\u7EF4\\u62A4\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u4EE3\\u7801\\u7EC4\\u7EC7\"), \"\\uFF1A\\u6240\\u6709\\u76F8\\u5173\\u4EE3\\u7801\\u96C6\\u4E2D\\u7BA1\\u7406\")), mdx(\"p\", null, \"\\u4F46 SPA \\u4E5F\\u6709\\u5176\\u7F3A\\u70B9\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"SEO \\u56F0\\u96BE\"), \"\\uFF1A\\u641C\\u7D22\\u5F15\\u64CE\\u7D22\\u5F15\\u95EE\\u9898\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u9996\\u5C4F\\u6027\\u80FD\"), \"\\uFF1A\\u9700\\u8981\\u52A0\\u8F7D\\u6240\\u6709\\u4EE3\\u7801\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5386\\u53F2\\u7BA1\\u7406\"), \"\\uFF1A\\u9700\\u8981\\u989D\\u5916\\u5B9E\\u73B0\\u8DEF\\u7531\\u673A\\u5236\")), mdx(\"p\", null, \"Chrome \\u56E2\\u961F\\u9009\\u62E9\\u4E86\\u7B80\\u5355\\u7C97\\u66B4\\u7684\\u65B9\\u5F0F\\uFF1A\\u81EA\\u5DF1\\u5B9E\\u73B0\\u8DEF\\u7531\\uFF0C\\u800C\\u4E0D\\u4F9D\\u8D56\\u6846\\u67B6\\u3002\"), mdx(\"h4\", null, \"\\u901A\\u4FE1\\u673A\\u5236\\u7684\\u8BBE\\u8BA1\"), mdx(\"p\", null, \"Chrome \\u6E90\\u7801\\u4E2D\\u6709\\u4E00\\u4E2A interesting \\u7684\\u8BBE\\u8BA1\\uFF1A\\u4ED6\\u4EEC\\u5B9E\\u73B0\\u4E86\\u4E00\\u5957 Proxy \\u673A\\u5236\\u4E0E\\u539F\\u751F\\u6D4F\\u89C8\\u5668\\u901A\\u4FE1\\u3002\\u8FD9\\u79CD\\u8BBE\\u8BA1\\u6709\\u51E0\\u4E2A\\u4F18\\u52BF\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u89E3\\u8026\"), \"\\uFF1A\\u4E1A\\u52A1\\u903B\\u8F91\\u4E0E\\u6D4F\\u89C8\\u5668\\u529F\\u80FD\\u5206\\u79BB\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5B89\\u5168\\u6027\"), \"\\uFF1A\\u901A\\u8FC7\\u4EE3\\u7406\\u63A7\\u5236\\u8BBF\\u95EE\\u6743\\u9650\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u53EF\\u6269\\u5C55\\u6027\"), \"\\uFF1A\\u53EF\\u4EE5\\u8F7B\\u677E\\u6DFB\\u52A0\\u65B0\\u7684\\u901A\\u4FE1\\u65B9\\u5F0F\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6027\\u80FD\"), \"\\uFF1A\\u76F4\\u63A5\\u8C03\\u7528\\u539F\\u751F API\\uFF0C\\u51CF\\u5C11\\u4E2D\\u95F4\\u5C42\")), mdx(\"h3\", null, \"2.4 \\u6027\\u80FD\\u4F18\\u5316\\u7684\\u5B9E\\u8DF5\"), mdx(\"h4\", null, \"1. CSS \\u653E\\u7F6E\\u7B56\\u7565\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"/* \\u5E38\\u89C4\\u505A\\u6CD5 */\\n\\n \\n\\n\\n/* Chrome \\u7684\\u505A\\u6CD5 */\\n\\n \\n\\n\\n\")), mdx(\"p\", null, \"\\u8FD9\\u79CD\\u7B56\\u7565\\u7684\\u539F\\u56E0\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u51CF\\u5C11\\u963B\\u585E\"), \"\\uFF1A\\u6D4F\\u89C8\\u5668\\u53EF\\u4EE5\\u8FB9\\u89E3\\u6790\\u8FB9\\u6E32\\u67D3\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u4F18\\u5316\\u7528\\u6237\\u4F53\\u9A8C\"), \"\\uFF1A\\u7528\\u6237\\u80FD\\u66F4\\u5FEB\\u770B\\u5230\\u5185\\u5BB9\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5E76\\u884C\\u5904\\u7406\"), \"\\uFF1ACSS \\u89E3\\u6790\\u4E0E HTML \\u6E32\\u67D3\\u53EF\\u4EE5\\u5E76\\u884C\")), mdx(\"h4\", null, \"2. \\u6309\\u9700\\u52A0\\u8F7D\"), mdx(\"p\", null, \"\\u867D\\u7136\\u662F\\u5355\\u9875\\u5E94\\u7528\\uFF0C\\u4F46 Chrome \\u91C7\\u7528\\u4E86\\u7EC4\\u4EF6\\u5316\\u8BBE\\u8BA1\\uFF0C\\u5B9E\\u73B0\\u4E86\\u6309\\u9700\\u52A0\\u8F7D\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"// \\u7EC4\\u4EF6\\u61D2\\u52A0\\u8F7D\\nconst loadComponent = async (name) => {\\n const module = await import(`./components/${name}.js`);\\n return module.default;\\n};\\n\\n// \\u52A8\\u6001\\u521B\\u5EFA\\u7EC4\\u4EF6\\nconst element = document.createElement('welcome-element');\\ndocument.body.appendChild(element);\\n\")), mdx(\"h3\", null, \"2.5 \\u5F00\\u53D1\\u5DE5\\u5177\\u7684\\u9009\\u62E9\"), mdx(\"h4\", null, \"\\u4E3A\\u4EC0\\u4E48\\u4E0D\\u7528\\u6784\\u5EFA\\u5DE5\\u5177\\uFF1F\"), mdx(\"p\", null, \"Chrome \\u6E90\\u7801\\u6709\\u51E0\\u4E2A\\u660E\\u663E\\u7279\\u70B9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u65E0\\u9884\\u7F16\\u8BD1\"), \"\\uFF1A\\u76F4\\u63A5\\u4F7F\\u7528\\u539F\\u751F JavaScript\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6A21\\u5757\\u5316\"), \"\\uFF1A\\u4F7F\\u7528 ES Module \\u6807\\u51C6\\u5316\\u6A21\\u5757\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6587\\u4EF6\\u7EC4\\u7EC7\"), \"\\uFF1A\\u6309\\u7167\\u529F\\u80FD\\u6A21\\u5757\\u7EC4\\u7EC7\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u7C7B\\u578B\\u68C0\\u67E5\"), \"\\uFF1A\\u53EF\\u80FD\\u4F7F\\u7528 JSDoc \\u6216 TypeScript \\u7C7B\\u578B\")), mdx(\"p\", null, \"\\u8FD9\\u79CD\\u9009\\u62E9\\u7684\\u539F\\u56E0\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5F00\\u53D1\\u6548\\u7387\"), \"\\uFF1A\\u7701\\u53BB\\u6784\\u5EFA\\u65F6\\u95F4\\uFF0C\\u5FEB\\u901F\\u8FED\\u4EE3\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u8C03\\u8BD5\\u53CB\\u597D\"), \"\\uFF1A\\u53EF\\u4EE5\\u76F4\\u63A5\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u8C03\\u8BD5\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u751F\\u4EA7\\u4F18\\u5316\"), \"\\uFF1A\\u6D4F\\u89C8\\u5668\\u672C\\u8EAB\\u4F1A\\u8FDB\\u884C\\u4F18\\u5316\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5B66\\u4E60\\u6210\\u672C\"), \"\\uFF1A\\u964D\\u4F4E\\u6846\\u67B6\\u4F9D\\u8D56\\uFF0C\\u66F4\\u4E13\\u6CE8\\u4E8E\\u4E1A\\u52A1\")), mdx(\"h4\", null, \"3. \\u6697\\u9ED1\\u6A21\\u5F0F\\u7684\\u6280\\u672F\\u5B9E\\u73B0\"), mdx(\"p\", null, \"Chrome \\u7684\\u6697\\u9ED1\\u6A21\\u5F0F\\u5B9E\\u73B0\\u5F88\\u6709\\u7279\\u8272\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"/* \\u4F7F\\u7528 CSS \\u53D8\\u91CF\\u548C\\u5A92\\u4F53\\u67E5\\u8BE2 */\\n:root {\\n --bg-color: #ffffff;\\n --text-color: #000000;\\n}\\n\\n@media (prefers-color-scheme: dark) {\\n :root {\\n --bg-color: #1a1a1a;\\n --text-color: #ffffff;\\n }\\n}\\n\\n/* \\u4F7F\\u7528 CSS \\u67E5\\u8BE2\\u9009\\u62E9\\u5668 */\\n.container {\\n background-color: var(--bg-color);\\n color: var(--text-color);\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u79CD\\u8BBE\\u8BA1\\u7684\\u597D\\u5904\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u7CFB\\u7EDF\\u7EA7\\u9002\\u914D\"), \"\\uFF1A\\u8DDF\\u968F\\u7CFB\\u7EDF\\u8BBE\\u7F6E\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6027\\u80FD\\u53CB\\u597D\"), \"\\uFF1A\\u7EAF CSS \\u5B9E\\u73B0\\uFF0C\\u65E0 JavaScript \\u5F00\\u9500\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6613\\u4E8E\\u7EF4\\u62A4\"), \"\\uFF1A\\u96C6\\u4E2D\\u7BA1\\u7406\\u4E3B\\u9898\\u53D8\\u91CF\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u53EF\\u6269\\u5C55\\u6027\"), \"\\uFF1A\\u53EF\\u4EE5\\u8F7B\\u677E\\u6DFB\\u52A0\\u66F4\\u591A\\u4E3B\\u9898\")), mdx(\"h3\", null, \"2.6 \\u5BF9\\u6211\\u4EEC\\u9879\\u76EE\\u7684\\u542F\\u793A\"), mdx(\"p\", null, \"\\u57FA\\u4E8E Chrome \\u7684\\u5B9E\\u8DF5\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u53CD\\u601D\\u81EA\\u5DF1\\u7684\\u9879\\u76EE\\uFF1A\"), mdx(\"h4\", null, \"1. \\u6280\\u672F\\u9009\\u578B\\u7684\\u539F\\u5219\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u4F18\\u5148\\u9009\\u62E9\\u6807\\u51C6\"), \"\\uFF1A\\u539F\\u751F\\u6807\\u51C6\\u901A\\u5E38\\u662F\\u6700\\u4F18\\u89E3\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u8C28\\u614E\\u5F15\\u5165\\u6846\\u67B6\"), \"\\uFF1A\\u6846\\u67B6\\u662F\\u6709\\u6210\\u672C\\u7684\\uFF08\\u5B66\\u4E60\\u6210\\u672C\\u3001\\u7EF4\\u62A4\\u6210\\u672C\\uFF09\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u4FDD\\u6301\\u7B80\\u5355\"), \"\\uFF1A\\u7B80\\u5355\\u7684\\u65B9\\u6848\\u5F80\\u5F80\\u66F4\\u53EF\\u9760\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5173\\u6CE8\\u6027\\u80FD\"), \"\\uFF1A\\u6027\\u80FD\\u4E0D\\u662F\\u4F18\\u5316\\u51FA\\u6765\\u7684\\uFF0C\\u8BBE\\u8BA1\\u51FA\\u6765\\u7684\")), mdx(\"h4\", null, \"2. \\u67B6\\u6784\\u8BBE\\u8BA1\\u7684\\u601D\\u8003\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// \\u4E00\\u4E2A\\u7B80\\u5355\\u4F46\\u7075\\u6D3B\\u7684\\u67B6\\u6784\\u8BBE\\u8BA1\\ninterface AppArchitecture {\\n // \\u6838\\u5FC3\\u529F\\u80FD\\n core: {\\n router: Router;\\n state: StateManager;\\n components: ComponentRegistry;\\n };\\n\\n // \\u6269\\u5C55\\u529F\\u80FD\\n plugins: Plugin[];\\n\\n // \\u5DE5\\u5177\\u94FE\\n utils: {\\n logger: Logger;\\n storage: Storage;\\n api: API;\\n };\\n}\\n\")), mdx(\"h4\", null, \"3. \\u5F00\\u53D1\\u6D41\\u7A0B\\u7684\\u5EFA\\u8BAE\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6E10\\u8FDB\\u5F0F\\u5F00\\u53D1\"), \"\\uFF1A\\u4ECE\\u7B80\\u5355\\u5F00\\u59CB\\uFF0C\\u9010\\u6B65\\u5B8C\\u5584\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6587\\u6863\\u5148\\u884C\"), \"\\uFF1A\\u597D\\u7684\\u6587\\u6863\\u6BD4\\u4EE3\\u7801\\u66F4\\u91CD\\u8981\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6D4B\\u8BD5\\u9A71\\u52A8\"), \"\\uFF1A\\u6D4B\\u8BD5\\u662F\\u8D28\\u91CF\\u7684\\u4FDD\\u969C\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6301\\u7EED\\u96C6\\u6210\"), \"\\uFF1A\\u81EA\\u52A8\\u5316\\u4FDD\\u8BC1\\u4EE3\\u7801\\u8D28\\u91CF\")), mdx(\"p\", null, \"Chrome \\u7684\\u6E90\\u7801\\u5C55\\u793A\\u4E86\\u4E00\\u79CD\\u4E0D\\u540C\\u7684\\u5F00\\u53D1\\u54F2\\u5B66\\uFF1A\\u7B80\\u5355\\u3001\\u76F4\\u63A5\\u3001\\u9762\\u5411\\u672A\\u6765\\u3002\\u4ED6\\u4EEC\\u6CA1\\u6709\\u4F7F\\u7528\\u6700\\u6D41\\u884C\\u7684\\u6846\\u67B6\\uFF0C\\u800C\\u662F\\u9009\\u62E9\\u4E86\\u6700\\u5408\\u9002\\u7684\\u6807\\u51C6\\u3002\\u8FD9\\u63D0\\u9192\\u6211\\u4EEC\\uFF0C\\u6280\\u672F\\u9009\\u578B\\u4E0D\\u662F\\u8FFD\\u6C42\\u6F6E\\u6D41\\uFF0C\\u800C\\u662F\\u9009\\u62E9\\u6700\\u9002\\u5408\\u9879\\u76EE\\u7684\\u65B9\\u6848\\u3002\"), mdx(\"h3\", null, \"2.7 \\u672A\\u6765\\u6280\\u672F\\u7684\\u53D1\\u5C55\\u8D8B\\u52BF\"), mdx(\"p\", null, \"\\u4ECE Chrome \\u7684\\u5B9E\\u8DF5\\u4E2D\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u770B\\u5230\\u51E0\\u4E2A\\u91CD\\u8981\\u8D8B\\u52BF\\uFF1A\"), mdx(\"h4\", null, \"1. Web Components \\u7684\\u666E\\u53CA\"), mdx(\"p\", null, \"\\u867D\\u7136\\u76EE\\u524D React\\u3001Vue \\u4E3B\\u6D41\\uFF0C\\u4F46 Web Components \\u5728\\u7279\\u5B9A\\u573A\\u666F\\u4E0B\\u6709\\u72EC\\u7279\\u4F18\\u52BF\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u771F\\u6B63\\u7684\\u5C01\\u88C5\"), \"\\uFF1A\\u6837\\u5F0F\\u548C\\u903B\\u8F91\\u5B8C\\u5168\\u9694\\u79BB\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u8DE8\\u6846\\u67B6\\u53EF\\u7528\"), \"\\uFF1A\\u4E0D\\u4F9D\\u8D56\\u4E8E\\u7279\\u5B9A\\u6846\\u67B6\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6D4F\\u89C8\\u5668\\u539F\\u751F\\u652F\\u6301\"), \"\\uFF1A\\u4E0D\\u9700\\u8981\\u989D\\u5916\\u5F15\\u5165\")), mdx(\"h4\", null, \"2. \\u6A21\\u5757\\u5316\\u6807\\u51C6\"), mdx(\"p\", null, \"ES Module \\u5DF2\\u7ECF\\u6210\\u4E3A\\u6807\\u51C6\\uFF0C\\u672A\\u6765\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u4E0D\\u9700\\u8981\\u6253\\u5305\\u5DE5\\u5177\"), \"\\uFF1A\\u6D4F\\u89C8\\u5668\\u76F4\\u63A5\\u652F\\u6301\\u6A21\\u5757\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5F00\\u53D1\\u4F53\\u9A8C\\u63D0\\u5347\"), \"\\uFF1A\\u65E0\\u9700\\u914D\\u7F6E\\u590D\\u6742\\u7684\\u6784\\u5EFA\\u6D41\\u7A0B\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6027\\u80FD\\u4F18\\u5316\"), \"\\uFF1A\\u6D4F\\u89C8\\u5668\\u53EF\\u4EE5\\u4F18\\u5316\\u6A21\\u5757\\u52A0\\u8F7D\")), mdx(\"h4\", null, \"3. \\u6E10\\u8FDB\\u5F0F Web \\u5E94\\u7528\"), mdx(\"p\", null, \"\\u7ED3\\u5408 Service Worker\\u3001WebAssembly \\u7B49\\u6280\\u672F\\uFF0C\\u672A\\u6765\\u7684 Web \\u5E94\\u7528\\u5C06\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u63A5\\u8FD1\\u539F\\u751F\\u4F53\\u9A8C\"), \"\\uFF1A\\u79BB\\u7EBF\\u3001\\u63A8\\u9001\\u3001\\u5B89\\u88C5\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u9AD8\\u6027\\u80FD\"), \"\\uFF1AWebAssembly \\u63D0\\u4F9B\\u9AD8\\u6027\\u80FD\\u8BA1\\u7B97\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5E73\\u53F0\\u65E0\\u5173\"), \"\\uFF1A\\u8DE8\\u5E73\\u53F0\\u3001\\u8DE8\\u8BBE\\u5907\")));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/short-url-service-in-30-minutes/short-url-service-in-30-minutes.md","id":"ebe45031-3d41-5792-b4d9-5529e4c4a168","parent":{"name":"short-url-service-in-30-minutes","sourceInstanceName":"blog"},"excerpt":"ubug.io 这个域名是在几年前申请的，一直续费用着，主要的一个原因是很简洁，所以有时候会想用这个域名做一个短链接服务。 今天终于把这个想法从 TODO List 拿出来思考并实现出来了。 这是地址： 短链服务 开发的过程太顺利，挺有意思，所以在此记录下整个实现，流水账很罗嗦，技术也不复杂，推荐扫一眼即可。 一、目标和需求 正常的短链服务一般用来做网址缩短，比长段的 URL 更容易分发，顺便同时在重定向的过程中做访问统计等。本质上只需要一个类似 KV…","fields":{"title":"🔗 30 分钟创建一个短链服务 ","slug":"/blog/short-url-service-in-30-minutes","description":"“域名很简练，如果用来做短链服务的话应该挺有意思” 这个想法一直存在，决定要做之后发现还是挺容易实现的，过程很有意思。","date":"2020-09-18","redirects":null,"datetime":"2020-09-18 12:23:35","categories":["code"],"series":null,"tags":["短链","Baas"],"status":"online"},"frontmatter":{"published":null,"tags":["短链","Baas"],"theme":null,"slug":"short-url-service-in-30-minutes","date":"2020-09-18 12:23:35"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"short-url-service-in-30-minutes\",\n \"title\": \"🔗 30 分钟创建一个短链服务 \",\n \"date\": \"2020-09-18 12:23:35\",\n \"author\": \"Ubug\",\n \"description\": \"“域名很简练，如果用来做短链服务的话应该挺有意思” 这个想法一直存在，决定要做之后发现还是挺容易实现的，过程很有意思。\",\n \"categories\": [\"code\"],\n \"tags\": [\"短链\", \"Baas\"],\n \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst SourceCodeLink = makeShortcode(\"SourceCodeLink\");\nconst CodeWithPreview = makeShortcode(\"CodeWithPreview\");\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"p\", null, \"ubug.io \\u8FD9\\u4E2A\\u57DF\\u540D\\u662F\\u5728\\u51E0\\u5E74\\u524D\\u7533\\u8BF7\\u7684\\uFF0C\\u4E00\\u76F4\\u7EED\\u8D39\\u7528\\u7740\\uFF0C\\u4E3B\\u8981\\u7684\\u4E00\\u4E2A\\u539F\\u56E0\\u662F\\u5F88\\u7B80\\u6D01\\uFF0C\\u6240\\u4EE5\\u6709\\u65F6\\u5019\\u4F1A\\u60F3\\u7528\\u8FD9\\u4E2A\\u57DF\\u540D\\u505A\\u4E00\\u4E2A\\u77ED\\u94FE\\u63A5\\u670D\\u52A1\\u3002\"), mdx(\"p\", null, \"\\u4ECA\\u5929\\u7EC8\\u4E8E\\u628A\\u8FD9\\u4E2A\\u60F3\\u6CD5\\u4ECE TODO List \\u62FF\\u51FA\\u6765\\u601D\\u8003\\u5E76\\u5B9E\\u73B0\\u51FA\\u6765\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u662F\\u5730\\u5740\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://s.ubug.io/\"\n }, \"\\u77ED\\u94FE\\u670D\\u52A1\")), mdx(\"p\", null, \"\\u5F00\\u53D1\\u7684\\u8FC7\\u7A0B\\u592A\\u987A\\u5229\\uFF0C\\u633A\\u6709\\u610F\\u601D\\uFF0C\\u6240\\u4EE5\\u5728\\u6B64\\u8BB0\\u5F55\\u4E0B\\u6574\\u4E2A\\u5B9E\\u73B0\\uFF0C\\u6D41\\u6C34\\u8D26\\u5F88\\u7F57\\u55E6\\uFF0C\\u6280\\u672F\\u4E5F\\u4E0D\\u590D\\u6742\\uFF0C\\u63A8\\u8350\\u626B\\u4E00\\u773C\\u5373\\u53EF\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001\\u76EE\\u6807\\u548C\\u9700\\u6C42\"), mdx(\"p\", null, \"\\u6B63\\u5E38\\u7684\\u77ED\\u94FE\\u670D\\u52A1\\u4E00\\u822C\\u7528\\u6765\\u505A\\u7F51\\u5740\\u7F29\\u77ED\\uFF0C\\u6BD4\\u957F\\u6BB5\\u7684 URL \\u66F4\\u5BB9\\u6613\\u5206\\u53D1\\uFF0C\\u987A\\u4FBF\\u540C\\u65F6\\u5728\\u91CD\\u5B9A\\u5411\\u7684\\u8FC7\\u7A0B\\u4E2D\\u505A\\u8BBF\\u95EE\\u7EDF\\u8BA1\\u7B49\\u3002\\u672C\\u8D28\\u4E0A\\u53EA\\u9700\\u8981\\u4E00\\u4E2A\\u7C7B\\u4F3C KV \\u7684\\u5B58\\u50A8\\u80FD\\u591F\\u5C06\\u7F51\\u5740\\u7F29\\u77ED\\u5373\\u53EF\\uFF0C\\u6EE1\\u8DB3\\u81EA\\u5DF1\\u7684\\u88C5\\u903C\\u9700\\u6C42\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5B58\\u50A8\\u548C\\u67E5\\u8BE2\\uFF1B\\u81F3\\u5C11\\u80FD\\u591F\\u5C06\\u5BF9\\u5E94\\u5173\\u7CFB\\u5B58\\u8FDB\\u53BB\\u3001\\u67E5\\u51FA\\u6765\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u63A5\\u53E3\\u548C\\u8BA1\\u7B97\\uFF1A\\u9700\\u8981\\u627F\\u63A5\\u8BF7\\u6C42\\uFF0C\\u5411\\u6570\\u636E\\u5E93\\u91CC\\u9762\\u67E5\\u8BE2\\uFF0C\\u7136\\u540E\\u8FD4\\u56DE 302 \\u76F8\\u5E94\\u3002\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u9700\\u6C42\\u91CD\\u70B9\\u662F\\u5B58\\u5728\\u54EA\\uFF1F\\u514D\\u8D39\\u7684\\u5B58\\u50A8\\u670D\\u52A1\\u4E0D\\u591A\\uFF0CLeanCloud \\u4F5C\\u4E3A BaaS \\u670D\\u52A1\\uFF0C\\u4E00\\u76F4\\u5728\\u7528\\u4ED6\\u5BB6\\u7684\\u5B58\\u50A8\\u670D\\u52A1\\uFF0C\\u5F00\\u53D1\\u7248\\u7684\\u91CF\\u7EA7\\u8DB3\\u591F\\u81EA\\u5DF1\\u4F7F\\u7528\\u3002\\u540C\\u65F6\\u63A5\\u53E3\\u548C\\u8BA1\\u7B97\\u65B9\\u9762\\uFF0C\\u914D\\u5957\\u7684\\u4E91\\u5F15\\u64CE\\u867D\\u7136\\u8D44\\u6E90\\u4E0D\\u591A\\uFF0C\\u4F46\\u662F\\u4E00\\u822C\\u7684\\u8BA1\\u7B97\\u548C\\u67E5\\u8BE2\\u4E5F\\u8DB3\\u591F\\u3002\\u6240\\u4EE5\\u6574\\u4E2A\\u8F6F\\u4EF6\\u521D\\u6B65\\u8BBE\\u60F3\\u653E\\u5230 LeanCloud \\u4E0A\\u9762\\uFF0C\\u8FD9\\u4E0D\\u662F\\u5E7F\\u544A\\uFF0C\\u4E00\\u76F4\\u89C9\\u5F97\\u4ED6\\u5BB6\\u7684\\u8FD9\\u4E9B BaaS \\u670D\\u52A1\\u6BD4\\u4E91\\u670D\\u52A1\\u5546\\u7528\\u8D77\\u6765\\u66F4\\u8212\\u670D\\uFF0C\\u552F\\u4E00\\u62C5\\u5FC3\\u7684\\u662F\\u4E07\\u4E00 SDK \\u7528\\u8D77\\u6765\\u4E4B\\u540E\\uFF0C\\u54EA\\u5929\\u4E0D\\u597D\\u8FC1\\u79FB\\uFF0C\\u7528\\u6765\\u505A\\u7B80\\u5355\\u7684\\u6280\\u672F\\u9A8C\\u8BC1\\u548C\\u81EA\\u7528\\u8DB3\\u591F\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u5F00\\u53D1\\u8FC7\\u7A0B\"), mdx(\"p\", null, \"\\u6574\\u4E2A\\u67B6\\u6784\\u53EF\\u4EE5\\u7B97\\u4F5C Serverless \\u7684\\u67B6\\u6784\\uFF0C\\u5B58\\u50A8\\u662F\\u7528\\u670D\\u52A1\\u6765\\u5B9E\\u73B0\\u7684\\uFF0C\\u53EA\\u9700\\u8981\\u8C03\\u7528\\u63A5\\u53E3\\u5373\\u53EF\\uFF0C\\u4E0D\\u7528\\u62C5\\u5FC3\\u5B58\\u5728\\u54EA\\u7684\\u95EE\\u9898\\u3002\\u8BA1\\u7B97\\u7528\\u7684\\u662F\\u53EF\\u4EE5\\u591A\\u5B9E\\u4F8B\\u8D1F\\u8F7D\\u5747\\u8861\\uFF0C\\u4E0D\\u4E2D\\u65AD\\u670D\\u52A1\\u7684\\u4E91\\u5F15\\u64CE\\uFF0C\\u867D\\u7136\\u4E0D\\u662F\\u5B8C\\u5168\\u5BB9\\u5668\\u5316\\u548C\\u4E91\\u51FD\\u6570\\u7684\\u6982\\u5FF5\\uFF0C\\u4F46\\u662F\\u786E\\u5B9E\\u4E0D\\u7528\\u5173\\u5FC3\\u670D\\u52A1\\u5668\\u7684\\u95EE\\u9898\\uFF0C\\u53EA\\u9700\\u8981\\u4EE3\\u7801\\u548C\\u90E8\\u7F72\\u5373\\u53EF\\u3002\"), mdx(\"p\", null, \"\\u672C\\u6587\\u53EA\\u5173\\u5FC3\\u5B9E\\u73B0\\uFF0C\\u7EDF\\u8BA1\\u529F\\u80FD\\u3001\\u6027\\u80FD\\u3001\\u5B89\\u5168\\u6027\\u7B49\\u90FD\\u662F\\u9700\\u8981\\u8003\\u8651\\u7684\\u70B9\\uFF0C\\u8FD9\\u91CC\\u90FD\\u6CA1\\u6709\\u6DF1\\u5165\\u7814\\u7A76\\uFF0C\\u7B97\\u662F\\u5B9E\\u73B0\\u6574\\u4E2A\\u529F\\u80FD\\u7684\\u6D41\\u6C34\\u8D26\\u3002\"), mdx(\"h3\", null, \"1. \\u5B9E\\u73B0\\u7B97\\u6CD5\"), mdx(\"p\", null, \"\\u601D\\u8DEF\\u5F88\\u7B80\\u5355\\uFF0C\\u5C31\\u662F\\u5B58\\u50A8\\u4E00\\u4E2A\\u5BF9\\u5E94\\u5173\\u7CFB\\u5373\\u53EF\\uFF0C\\u6700\\u7B80\\u5355\\u7684\\u4E00\\u4E2A\\u81EA\\u589E ID \\u52A0\\u4E0A\\u539F\\u94FE\\u63A5\\u5B57\\u6BB5\\u751A\\u81F3\\u90FD\\u80FD\\u5B9E\\u73B0\\u3002\\u4F46\\u662F\\u81EA\\u589E ID \\u5B89\\u5168\\u6027\\u4E0D\\u591F\\uFF0C\\u4ECD\\u9700\\u8981\\u54C8\\u5E0C\\u51FD\\u6570\\u6765\\u627E\\u51FA\\u4E00\\u4E2A\\u77ED\\u7801\\u7684\\u5BF9\\u5E94\\u5173\\u7CFB\\u3002\"), mdx(\"p\", null, \"\\u7F51\\u4E0A\\u7684\\u7B97\\u6CD5\\u6709\\u5F88\\u591A\\uFF0C\\u8FD9\\u4E2A\\u751A\\u81F3\\u548C\\u5206\\u5E03\\u5F0F\\u6570\\u636E\\u8868\\u7684\\u552F\\u4E00 ID \\u8BBE\\u8BA1\\u5F88\\u76F8\\u4F3C\\uFF08\\u96EA\\u82B1\\u7B97\\u6CD5\\u3001Redis\\u3001\\u5355\\u5B9E\\u4F8B\\u5173\\u7CFB\\u6570\\u636E\\u5E93\\u5219\\u589E\\u7B49\\u65B9\\u6848\\uFF09\\uFF0C\\u6211\\u8FD9\\u91CC\\u4F7F\\u7528\\u81EA\\u589E id \\u8F6C\\u8FDB\\u5236\\u6765\\u5B9E\\u73B0\\u8F83\\u77ED\\u5B57\\u7B26\\u4E32\\uFF0C\\u5F88\\u5927\\u7684\\u7F3A\\u70B9\\u662F\\u4E00\\u65E6\\u88AB\\u4EBA\\u627E\\u51FA\\u6765\\u8FDB\\u5236\\u8F6C\\u6362\\u89C4\\u5F8B\\u5C31\\u80FD\\u63A8\\u65AD\\u5E93\\u91CC\\u7684 id\\uFF0C\\u4E0D\\u8FC7\\u81EA\\u7528\\u4E5F\\u4E0D\\u4F1A\\u592A\\u82DB\\u6C42\\u8FD9\\u4E2A\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6570\\u636E\\u5E93\\u63D2\\u5165\\u65B0\\u8BB0\\u5F55\\uFF1A\\uFF08\\u4F8B\\u5982\\uFF1A\", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"http://example.com\"\n }, \"http://example.com\"), \" \\uFF09\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5F97\\u5230\\u4E00\\u4E2A\\u81EA\\u589E\\u7684\\u5341\\u8FDB\\u5236 ID \\u6570\\u5B57\\uFF1A\\uFF08\\u4F8B\\u5982\\uFF1A55116\\uFF09\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5C06\\u6570\\u5B57\\u6309\\u7167\\u8FDB\\u5236\\u8F6C\\u6362\\u6210\\u72EC\\u7279\\u7684\\u9AD8\\u8FDB\\u5236\\u5B57\\u7B26\\u4E32\\u4F5C\\u4E3A\\u77ED\\u7801\\u5B58\\u5230\\u521A\\u624D\\u7684\\u8BB0\\u5F55\\uFF08\\u4F8B\\u5982\\uFF1A\\u7528 16 \\u8FDB\\u5236\\u8F6C 55116 \\u5230 d74c\\uFF09\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u8FD4\\u56DE\\u8FD9\\u4E2A\\u77ED\\u7801 \\uFF08\\u4F8B\\u5982\\uFF1Ad74c\\uFF09\")), mdx(\"p\", null, \"\\u4F60\\u53EF\\u4EE5\\u81EA\\u5DF1\\u9009\\u62E9\\u4E00\\u4E2A\\u8FDB\\u5236\\uFF0C\\u4F8B\\u5982 32\\u8FDB\\u5236\\u300162\\u8FDB\\u5236\\u7B49\\u6765\\u5C3D\\u53EF\\u80FD\\u591A\\u5B57\\u7B26\\u6765\\u4EE3\\u66FF\\u8FD9\\u4E2A\\u81EA\\u589EID\\uFF1B\\n\\u540C\\u65F6\\u8FDB\\u5236\\u8F6C\\u6362\\u4E5F\\u53EF\\u4EE5\\u7528\\u4E71\\u5E8F\\u7684\\u5B57\\u7B26\\u4E32\\u6765\\u5B9E\\u73B0\\u81EA\\u5B9A\\u4E49\\u7684\\u8F6C\\u6362\\u8FC7\\u7A0B\\uFF0C\\u4E0D\\u8BA9\\u4EBA\\u4E00\\u773C\\u770B\\u51FA\\u6765\\u9012\\u589E\\u7684\\u8D8B\\u52BF\\uFF0C\\u4F8B\\u5982\\uFF1A16 \\u8FDB\\u5236\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"26dea0b731c94f58\"), \" \\u4EE3\\u66FF \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"0123456789abcdef\")), mdx(\"h3\", null, \"2. \\u5B58\\u50A8\\u4E2D\\u521B\\u5EFA\\u65B0\\u7684\\u8868\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/8bf3953cc78aea1f3ff3adf69be79c8a/07544/data.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"12.741312741312742%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAd0lEQVQI101O2w7FIAzy/z/VxVt1XnZUzmhisgdSSgnUhBDgnIPzHtZalFKw1sLeG3NOBfczv/hqh5sgN+RuEBGkGDWw1qqTGvnZW2tIKSHnrBqfoYc3ct7MlR/4+lPTCSFoYABbxxjovesX9MW3mIEMoJcaOfU/l77oXhAHt+sAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"存储结构\",\n \"title\": \"存储结构\",\n \"src\": \"/static/8bf3953cc78aea1f3ff3adf69be79c8a/0dc48/data.png\",\n \"srcSet\": [\"/static/8bf3953cc78aea1f3ff3adf69be79c8a/2c191/data.png 259w\", \"/static/8bf3953cc78aea1f3ff3adf69be79c8a/86b01/data.png 518w\", \"/static/8bf3953cc78aea1f3ff3adf69be79c8a/0dc48/data.png 1035w\", \"/static/8bf3953cc78aea1f3ff3adf69be79c8a/07544/data.png 1170w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u5B58\\u50A8\\u7ED3\\u6784\"), \"\\n \")), mdx(\"p\", null, \"\\u91CD\\u70B9\\u662F\\u5176\\u4E2D\\u7684 index\\u3001key\\u3001value \\u4E09\\u4E2A\\u5B57\\u6BB5\\uFF0C\\u8868\\u793A\\u81EA\\u589E\\u5E8F\\u53F7\\u3001\\u77ED\\u7801\\u548C\\u539F\\u59CB\\u94FE\\u63A5\\u3002\"), mdx(\"h3\", null, \"3. \\u7ED1\\u5B9A\\u4E91\\u5F15\\u64CE\\u57DF\\u540D\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"474px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/fd362621a3a63ef8b9a042febf9cba41/731cf/ip.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"92.27799227799228%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACFElEQVQ4y5VUa2/aQBD0//8/baXyIahRFZVWSVW1qAGCeTn4BX6ez3d+THYPTBpAlXPSGLy+m5u9nT1La42macCjrmvIUqIoCgOlFEGbOM/pA0vTotVqgd/jMeb2HJoIzkfbtr3AG1uswtt6CNwQvusjTVPs93tIWZ7I+owDISms6gpu4eAxGsNOnyArSV/7EXXK3hDqSmOZzfFje4df4U+UteyX5lWFlHJVVaei8CxW3DTt5YGfEV4riCHkKkfRHkIIOr+E/ke9zoznZ1lmzjvPc+MIQ8j2SIgojmMkSWImcWG6X47zAiaQUp7QWeuAwzuLs3jhZr3BdDLFarlCEARwnGd4noc1x2czLFdr+EGILBfIRUEQZgPeqAPzsEorFzn2yQ5hEiKIfURJdFImkhhlliDYbhCHPgr6JqIdcorHx2yyc8KUFkz8vxgt73Br38B2Z7CnT6R4guzhG8TtZxTfh4QvEF8HEDefkD7+gUMZZLTxvwrLkgjLsjS5VwzyEfdJfYQmB6imhqqPoEoaUFybtnzFgaeCxZUptSRoSKqwHo2gBgMo2z54jS3Vtpe44kPTy6pS2OUhojiBt1ggHQ4RffwA5/7eqESPHr7oFNWQZLICV4/7JKbY2nXRkPr2vZcDPwLfJ6s45MP0mOL7bpm3hHTAjrPBbDaF6/kXqfQdrynr7gJtwX3dXarqrIr/hz613gs2/He9UySSVQAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"绑定云引擎域名\",\n \"title\": \"绑定云引擎域名\",\n \"src\": \"/static/fd362621a3a63ef8b9a042febf9cba41/731cf/ip.png\",\n \"srcSet\": [\"/static/fd362621a3a63ef8b9a042febf9cba41/2c191/ip.png 259w\", \"/static/fd362621a3a63ef8b9a042febf9cba41/731cf/ip.png 474w\"],\n \"sizes\": \"(max-width: 474px) 100vw, 474px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u7ED1\\u5B9A\\u4E91\\u5F15\\u64CE\\u57DF\\u540D\"), \"\\n \")), mdx(\"p\", null, \"\\u8FD9\\u4E00\\u6B65\\u7684\\u76EE\\u7684\\u662F\\u7528\\u4F60\\u7684\\u57DF\\u540D\\u6765\\u8BBF\\u95EE\\u5230\\u4E91\\u5F15\\u64CE\\u670D\\u52A1\\u3002\\u524D\\u63D0\\u662F\\u4F60\\u6709\\u8FD9\\u4E2A\\u57DF\\u540D\\uFF0C\\u800C\\u4E14\\u6700\\u597D\\u662F\\u5907\\u6848\\u8FC7\\u7684\\uFF0C\\u5982\\u679C\\u6CA1\\u5907\\u6848\\u53EF\\u80FD\\u9700\\u8981\\u5230\\u56FD\\u9645\\u8282\\u70B9\\u7684\\u670D\\u52A1\\u6765\\u5B9E\\u73B0\\u8FD9\\u4E2A\\u8BBF\\u95EE\\u3002\"), mdx(\"h3\", null, \"4. \\u7528\\u5B98\\u65B9\\u793A\\u4F8B\\u5B9E\\u73B0\\u81EA\\u5DF1\\u7684\\u670D\\u52A1\"), mdx(\"p\", null, \"\\u7136\\u540E\\u81EA\\u5DF1\\u521B\\u5EFA\\u4E00\\u4E2A Git \\u4ED3\\u5E93\\uFF0C\\u968F\\u4FBF\\u5728\\u54EA\\uFF0C\\u628A\\u4E0B\\u9762\\u8FD9\\u4E2A\\u4ED3\\u5E93\\u4EE3\\u7801\\u62F7\\u8D1D\\u5230\\u91CC\\u9762\\uFF1A\"), mdx(SourceCodeLink, {\n url: \"https://github.com/leancloud/slim-getting-started\",\n name: \"Slim Getting Started\",\n desc: \"Slim Getting Started for LeanEngine\",\n mdxType: \"SourceCodeLink\"\n }), mdx(\"p\", null, \"\\u5F88\\u7B80\\u5355\\u7684\\u4E00\\u4E2A PHP \\u9879\\u76EE\\uFF08\\u53EF\\u4EE5\\u9009\\u62E9\\u5B98\\u65B9\\u5176\\u4ED6\\u73AF\\u5883\\u793A\\u4F8B\\uFF0C\\u8FD9\\u91CC\\u6211\\u9009\\u62E9\\u7528 PHP\\uFF09\\uFF0C\\u4FEE\\u6539\\u9996\\u9875\\uFF0C\\u6DFB\\u52A0\\u63A5\\u53E3\\uFF1A\"), mdx(\"p\", null, \"\\u521B\\u5EFA\\u9996\\u9875\\uFF1A\"), mdx(CodeWithPreview, {\n codes: [{\n name: 'index.html',\n code: \"\\n\\n...\\n\\n
\\n
\\n
\\n

\\u77ED\\u94FE\\u670D\\u52A1

\\n

\\u5C06\\u957F\\u94FE\\u63A5\\u8F6C\\u4E3A\\u77ED\\u94FE\\u7684\\u670D\\u52A1: http://s.ubug.io/u/s3T

\\n
\\n
\\n \\n

\\u76EE\\u524D\\u4EC5\\u652F\\u6301 http / https \\u534F\\u8BAE\\u7684\\u94FE\\u63A5.

\\n
\\n \\n
\\n
\\n
\\n
\\n\\n\\n\\n\"\n }],\n withTitle: true,\n column: true,\n titleBar: \"src/views/new_url.phtml\",\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\uD83D\\uDC46 \\u7B80\\u5355\\u628A\\u7528\\u6237\\u8F93\\u5165\\u62FF\\u5230\\uFF0C\\u7136\\u540E\\u5411\\u540E\\u53F0\\u8BF7\\u6C42\\u7684\\u52A8\\u4F5C\\u3002\"), mdx(CodeWithPreview, {\n codes: [{\n name: 'index.php',\n code: \"\\n// 10 \\u8FDB\\u5236 \\u8F6C 62 \\u8FDB\\u5236\\nfunction from10to62($id) {\\n $dict = 'femXnjvkw69DgUipVo5FsGrtyuHIxz0Ah4RScC7bEM2QN1O3PJKTZaLlWYqd8B'; // \\u4E71\\u5E8F\\n $index = $id + 999927; // \\u907F\\u514D\\u4ECE0\\u5F00\\u59CB\\n $result = '';\\n do {\\n $result = $dict[$index % 62] . $result;\\n $index = intval($index / 62);\\n } while ($index != 0);\\n return $result;\\n}\\n// \\u9996\\u9875\\u6E32\\u67D3\\n$app->get('/', function (Request $request, Response $response) {\\n return $this->view->render($response, \\\"new_url.phtml\\\");\\n});\\n// \\u77ED\\u94FE\\u8DF3\\u8F6C\\n$app->get('/u/{short_url}', function (Request $request, Response $response) {\\n $su = $request->getAttribute('short_url');\\n\\n // \\u6570\\u636E\\u5E93\\u67E5\\u8BE2\\uFF0C302 \\u8DF3\\u8F6C\\u5230\\u771F\\u5B9E\\u94FE\\u63A5\\uFF0C\\u4E0D\\u7136\\u8FD4\\u56DE 404\\n try {\\n $query = new Query(\\\"short_url\\\");\\n $query->equalTo(\\\"key\\\", $su);\\n $url = $query->find();\\n $realUrl = $url[0]->get(\\\"value\\\");\\n\\n return $response->withStatus(302)->withHeader(\\\"Location\\\", $realUrl);\\n } catch (\\\\Exception $ex) {\\n error_log(\\\"Query record failed!\\\");\\n $response->withStatus(404);\\n $response->getBody()->write(\\\"your request $su not found!\\\");\\n }\\n return $response;\\n});\\n// \\u77ED\\u94FE\\u751F\\u6210\\n$app->post(\\\"/su/new\\\", function(Request $request, Response $response) {\\n $data = $request->getParsedBody();\\n $url = $data[\\\"url\\\"];\\n\\n $query = new Query(\\\"short_url\\\");\\n\\n $query->equalTo(\\\"value\\\", $url);\\n $url = $query->find();\\n // \\u6570\\u636E\\u5E93\\u5DF2\\u7ECF\\u5B58\\u4E86\\u7684\\uFF0C\\u76F4\\u63A5\\u8FD4\\u56DE\\uFF0C\\u907F\\u514D\\u76F8\\u540C\\u94FE\\u63A5\\u7684\\u591A\\u4E2A\\u77ED\\u94FE\\uFF0C\\u8FD9\\u4E2A\\u5982\\u679C\\u9700\\u8981\\u7EDF\\u8BA1\\u4E0D\\u540C\\u6E20\\u9053\\uFF0C\\u90A3\\u5C31\\u4E0D\\u80FD\\u6709\\u8FD9\\u4E2A\\u903B\\u8F91\\n if(count($url) > 0) {\\n return $response->withJson(array('status' => 1, 'key' => $url[0]->get(\\\"key\\\")));\\n } else {\\n // \\u5148\\u521B\\u5EFA\\n $su = new LeanObject(\\\"short_url\\\");\\n $su->set(\\\"value\\\", $data[\\\"url\\\"]);\\n\\n $so = new SaveOption();\\n $so->fetchWhenSave = true;\\n $su->save($so);\\n\\n // \\u7136\\u540E\\u6839\\u636E\\u81EA\\u589E ID \\u66F4\\u65B0\\u77ED\\u7801\\n $index = $su->get('index');\\n $key = from10to62($index);\\n $su->set(\\\"key\\\", $key);\\n $su->save();\\n\\n return $response->withJson(array('status' => 0, 'key' => $key));\\n }\\n});\\n\"\n }],\n withTitle: true,\n column: true,\n titleBar: \"src/views/new_url.phtml\",\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\uD83D\\uDC46 \\u751F\\u6210\\u548C\\u8DF3\\u8F6C\\u7684\\u670D\\u52A1\\u7AEF\\u4EE3\\u7801\"), mdx(\"h4\", null, \"5. \\u4EE3\\u7801\"), mdx(SourceCodeLink, {\n url: \"https://cnb.cool/ubug/leancloud-things/engine\",\n name: \"\\u540E\\u7AEF\\u4EE3\\u7801\",\n desc: \"\\u6574\\u4E2A\\u540E\\u7AEF\\u7684\\u4EE3\\u7801\\u90FD\\u5F88\\u7B80\\u5355\\uFF0C\\u91CC\\u9762\\u8DDF\\u81EA\\u5DF1\\u90E8\\u7F72\\u7684\\u6709\\u70B9\\u4E0D\\u540C\",\n mdxType: \"SourceCodeLink\"\n }), mdx(\"h2\", null, \"5. \\u6700\\u540E\"), mdx(\"p\", null, \"\\u77ED\\u94FE\\u63A5\\u670D\\u52A1\\u76EE\\u524D\\u6709\\u5F88\\u5927\\u7528\\u5904\\uFF0C\\u5206\\u53D1\\u548C\\u7EDF\\u8BA1\\u5728\\u5F53\\u524D\\u8FD9\\u4E2A\\u5927\\u6570\\u636E\\u65F6\\u4EE3\\u6709\\u5F88\\u5927\\u7684\\u4EF7\\u503C\\u3002\\u505A\\u77ED\\u94FE\\u63A5\\u670D\\u52A1\\u5927\\u90E8\\u5206\\u4E5F\\u662F\\u7528\\u6765\\u6536\\u96C6\\u7528\\u6237\\u8BBF\\u95EE\\u3001\\u9875\\u9762\\u8BBF\\u95EE\\u7B49\\uFF0C\\u5404\\u4E2A\\u5927\\u516C\\u53F8\\u4E5F\\u90FD\\u6709\\u5F88\\u6210\\u719F\\u7684\\u65B9\\u6848\\u3002\"), mdx(\"p\", null, \"\\u5BF9\\u4E8E\\u6211\\u672C\\u8EAB\\uFF0C\\u6574\\u4E2A\\u9700\\u6C42\\u672C\\u8EAB\\u4E5F\\u4E0D\\u590D\\u6742\\uFF0C\\u6BD4\\u8F83\\u6709\\u610F\\u601D\\u7684\\u70B9\\u5728\\u4E8E\\u7528 BaaS \\u7684\\u6A21\\u5F0F\\u4E0D\\u7528\\u5F88\\u591A\\u4EE3\\u7801\\u5C31\\u80FD\\u5B9E\\u73B0\\u4E2A\\u5927\\u5DEE\\u4E0D\\u79BB\\uFF0C\\u5F53\\u7136\\u76EE\\u524D\\u53EA\\u662F\\u4E2A Demo\\uFF0C\\u81EA\\u5DF1\\u4E5F\\u4E0D\\u77E5\\u9053\\u7528\\u5728\\u54EA\\u3002\"), mdx(\"p\", null, \"\\u540E\\u671F\\u770B\\u5FC3\\u60C5\\u53EF\\u80FD\\u589E\\u52A0\\u7EDF\\u8BA1\\u529F\\u80FD\\u3001\\u81EA\\u52A8\\u4E8C\\u7EF4\\u7801\\u3001\\u52A0\\u5BC6\\u3001\\u81EA\\u5B9A\\u4E49\\u7B49\\u529F\\u80FD\\uFF0C\\u4E5F\\u53EF\\u80FD\\u843D\\u5728\\u8FD9\\u5403\\u7070\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}